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内 容 简 介 

JavaScript 作为 流行 的 脚本 语言 ， 其 应 用 方向 也 从 开始 只 作为 网 页 脚本 ， 到 现在 可 以 做 网 页 应 用 程序 、 
React Native 跨 平 台 移 动 端 应 用 、 后 端 服务 等 。 作 为 现代 开发 者 ，JavaScript 无 疑 成 为 必须 掌握 的 一 门 技能 。 

本 书 从 JavaScript 的 基本 语法 、 函 数 与 对 象 、 高 级 特性 到 设计 模式 、HTML DOM/BOM 对 JavaScript 的 语 
法 、 编 程 思想 以 及 应 用 进行 了 全 面 的 讲解 。 本 书 的 特色 是 介绍 了 JavaScript ES 6 的 新 语法 ， 将 复杂 的 
JavaScript 语言 划分 成 100 多 个 主题 进行 讲解 ， 并 在 各 章 设 计 了 大 量 的 编程 练习 ， 在 本 书 的 最 后 还 设计 了 两 
个 实用 的 小 项 目 ， 旨 在 帮助 读者 开发 出 自己 的 应 用 程序 。 

本 书 适合 想 快速 学 习 JavaScript 的 编程 初学 者 、 学 生 以 及 对 编程 感 兴趣 的 人 员 。 
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当 你 拿 到 这 本 书 时 , 首先 要 感谢 你 在 众多 编程 书籍 中 选择 本 书 。 我 想 要 告诉 你 的 是 ， 
这 是 一 本 讲解 JavaScript 语法 的 工具 书 , 但 却 不 仅仅 是 一 本 工具 书 。 除了 学 习 JavaScript 
外 ， 本 书 会 更 多 地 锻炼 你 的 编程 思维 ， 提 高 你 的 程序 理解 与 设计 能 力 。 如 果 你 是 一 个 编 
程 界 的 小 白 ， 那 么 恭喜 你 ， 本 书 对 你 再 合适 不 过 了 。 


很 长 一 段 时 间 ，JavaScript 语言 都 被 一 些 开发 者 戏称 为 “玩具 语言 ”。 的 确 ， 在 移 
动 设备 未 普及 、 网 络 传输 速度 不 够 快 的 时 代 ，JavaScript 更 多 的 是 用 来 进行 网 页 的 部 分 
动态 展示 和 动画 开发 。 和 强大 的 Java、C++ 等 编译 型 语言 相 比 , JavaScript 的 确 简 单 得 多 。 
然而 ， 这 并 非 表 示 JavaScript 本 身 不 够 强大 ， 只 是 还 没有 完全 展现 出 来 而 已 。 


随 着 移动 端 设 备 的 普及 与 无 线 网 速度 越 来 越 快 ， 移 动 应 用 逐渐 代替 传统 的 桌面 应 
用 ， 单 页 面 网 页 应 用 与 响应 式 移动 端 应 用 更 是 得 到 飞速 的 发 展 ， 现 在 你 可 以 十 分 容易 地 
在 云 上 进行 协同 办 公 ， 可 以 在 毫 无 感知 的 情况 下 更 新 自己 的 应 用 程序 ， 获 得 更 优质 的 服 
务 ， 这 些 都 要 归功 于 JavaScript， 本 书 将 带 你 领略 JavaScript 的 美妙 。 


本 书 在 结构 上 分 为 8 个 章节 ， 总 体 上 遵循 由 易 到 难 的 安排 方式 。 


第 1 章 为 快速 体验 JavaScript， 本 章 将 向 你 介绍 一 些 JavaScript 的 基本 编码 规则 、 
JavaScript 的 语法 特点 以 及 JavaScript 一 些 简单 的 概念 。 并 且 在 本 章 中 将 教 你 配置 
JavaScript 运行 环境 以 及 调试 JavaScript 代码 。 本 章 的 安排 主要 是 让 你 在 学 习 之 前 可 以 简 
单 认识 一 下 JavaScript 这 门 语言 ， 如 果 你 以 前 从 未 接触 过 它 ， 相 信 会 使 你 耳目 一 新 。 


第 2 章 为 ECMAScript 的 语法 世界 ， 你 会 在 本 章 学 习 到 变量 、 作 用 域 、 数 据 类 型 、 
对 象 、 运 算 符 和 类 型 转换 的 相关 知识 。 通 过 本 章 的 学 习 ， 你 能 够 掌握 使 用 JavaScript 编 
写 简单 的 运算 程序 ， 能 够 用 JavaScript 处 理 简 单 的 逻辑 问题 。 


第 3 章 为 ECMAScript 流程 控制 和 函数 ， 有 了 流程 语句 ， 你 的 程序 便 有 了 一 定 程 度 
上 的 智能 。 函 数 则 更 进一步 ， 使 程序 可 以 拆 分 成 一 个 一 个 的 功能 模块 ， 理 论 上 讲 ， 学 习 
完 本 章 ， 你 就 可 以 使 用 JavaScript 解决 大 部 分 编程 问题 。 

第 4 章 为 ECMAScript 面向 对 象 编程 。 面 向 对 象 是 人 类 在 编程 界 的 一 大 发 明 ， 也 是 


现代 编程 领域 中 流行 的 编程 方式 。 有 了 面向 对 象 ， 程 序 才 真正 地 变 成 了 一 个 世界 ， 编 程 
也 真正 地 变 成 了 一 种 艺术 。 巧 的 是 ，JavaScript 是 一 种 完全 的 面向 对 象 语言 ， 但 是 其 又 
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不 是 传统 意义 上 的 基于 类 的 面向 对 象 语言 ， 这 将 十 分 有 趣 ， 相 信 本 章 的 内 容 一 定 会 让 你 
兴趣 嚼 然 。 


第 5 章 为 ECMAScript 的 高 级 特性 ， 其 中 很 多 是 ES6 中 新 增 的 特性 。ES6 使 得 
JavaScript 的 功能 有 了 极 大 的 提升 ， 本 章 中 介绍 的 解构 赋值 、 箭 头 函 数 、 代 理 对 象 、 承 
诺 对 象 、 状 态 机 对 象 等 都 会 成 为 你 使 用 JavaScript 编程 的 “绝世 好 剑 ”。 

第 6 章 为 JavaScript 常用 设计 模式 ， 虽 然 这 些 设 计 模式 都 是 通过 JavaScript 进行 实现 
和 演示 的 ， 但 是 它们 和 JavaScript 并 没有 特别 大 的 关系 。 在 编程 领域 ， 设 计 模 式 的 思想 是 
通用 的 ， 甚 至 和 你 生活 中 的 思考 方式 也 是 通用 的 。 因 此 ， 本 章 将 是 你 的 一 场 思 维 盛宴 。 

第 7 章 为 JavaScript HTML DOM/BOM， 主 要 介绍 HTML DOM 和 HTML BOM 的 
相关 知识 ， 因 为 JavaScript 最 简单 的 应 用 就 是 操作 HTML DOM 和 BOM。 


第 8 章 为 JavaScript 项 目 实战 ， 实 战 是 检测 你 学 习 成 果 的 一 种 好 方法 ， 并 且 在 实际 
使 用 中 ， 你 也 能 更 深入 地 理解 所 学 习 到 的 知识 。 


希望 本 书 可 以 帮助 你 达到 学 习 目标 , 如 果 你 想 获取 JavaScript 编程 的 相关 教学 视频 ， 
可 以 通过 以 下 网 址 访问 我 的 网 络 课程 : 





https://edu.csdn.net/lecturer/course_list 


如 果 你 在 学 习 过 程 中 遇 到 问题 或 者 发 现 本 书 的 遗漏 或 错误 之 处 ， 可 以 随时 与 我 联 
系 ， 我 的 QQ 是 : 316045346。 当 然 ， 在 本 书 出 版 的 过 程 中 ， 我 和 出 版 社 的 编辑 以 及 所 
有 校对 和 整理 本 书 的 朋友 都 付出 了 很 多 汗水 , 尽量 保证 可 以 尽善尽美 地 让 它 呈 现在 你 的 
面前 。 最后， 感谢 王 金 柱 编辑 在 本 书 编写 过 程 中 提出 的 宝贵 意见 和 在 修订 过 程 中 的 辛苦 
工作 ， 感 谢 吕 远 同学 提供 的 校 稿 服务 ， 感 谢 其 他 所 有 为 本 书 出 版 付出 汗水 的 人 。 如 果 本 
书 可 以 给 你 带 来 提高 与 帮助 ， 我 们 的 辛苦 就 会 更 有 价值 。 





巫 少 
2018 年 5 月 24 日 上 海 
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快速 体验 JavaScript 


如 果 你 是 初学 者 ， 本 章 将 告诉 你 如 何 编写 JavaScript 程 序 ， 本 章 分 别 讲解 了 在 浏览 器 和 
编辑 器 中 编写 JavaScript 代 码 的 方法 ， 变 量 、 条 件 、 循 环 、 对 象 等 基本 概念 以 及 JavaScript 语 
言 的 特点 ， 让 你 对 JavaScript 这 门 语言 有 个 概览 并 且 能 够 简单 地 应 用 。 


1-1 使 用 Chrome 运行 JavaScript 代码 


JavaScript 最 大 的 用 武之 地 在 于 浏览 器 ， 浏览 器 也 提供 了 越 来 越 丰 富 的 JavaScript 调 试 工 
具 , 不 夸张 地 讲 , 你 完全 可 以 使 用 浏览 器 工具 进行 JavaScript 开 发 。 现在 , 就 请 打开 谷歌 浏览 
器 Chrome， 使 用 快捷 键 Command+Option+J 就 可 以 直接 打开 调试 模式 ， 如 图 1-1 所 示 。 





[R 中 | Blements Console Sources Network Performance Memory » ; x 


© top 了 Filter Info 了 


Navigated to chrome-search://local-ntp/local-ntp.html 
> 








图 1-1 Chrome 浏览 器 的 调试 工具 箱 
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在 Console 区 ， 键 入 JavaScript 代 码 后 ， 可 以 直接 在 当前 浏览 器 页 面 中 运行 , 例如 ， 在 其 
中 编写 如 下 代码 后 按 回 车 键 : 


document.write("<h1> 欢 迎 你 学 习 本 书 </h1>"); 
此 时 ， 浏 览 器 的 界面 会 显示 如 图 1-2 所 示 的 信息 。 


欢迎 您 学 习 本 书 


图 1-2 浏览 器 界面 








1-2” ”JavaScript 的 变量 


变量 是 存储 信息 的 容器 。 在 JavaScript 中 ， 你 总 是 需要 使 用 变量 来 进行 值 的 存储 和 传递 。 
JavaScript 中 的 变量 是 无 类 型 的 ， 这 也 是 JavaScript 语 言 的 一 大 特点 ， 因 为 变量 无 类 型 ， 开 发 
者 可 以 用 同一 个 变量 存储 各 种 各 样 的 值 。var 关 键 字 用 来 声明 变量 ,在 ES6 ( ECMAScript 6 ) 
中 提供 了 let 关 键 字 ， 其 声明 的 变量 会 受到 块 级 作用 域 的 影响 , 应 用 也 更 加 广泛 。 请 看 下 面 的 
例子 : 


// 使 用 var 声明 变量 
var name; 

// 为 变量 赋值 

name = "Jaki"; 

// 使 用 let 定义 变量 
let age = 25; 


1-3 不 同 数据 类 型 之 间 的 运 


JavaScript 中 提供 了 常用 的 数学 运算 符 ， 如 “+”“-”“*”““/”“%” 等 ,还 提供 了 众 
多 逻辑 运算 符 、 复 合 运算 符 、 位 运算 符 和 比较 运算 符 。 如 果 需 要 更 高 级 的 数学 运算 ， 你 也 可 
以 使 用 JavaScript 中 的 Math 对 象 ， 这 是 一 个 专门 用 来 进行 数学 计算 以 及 提供 数学 常数 的 对 象 。 
需要 注意 , 在 JavaScript 中 经 常会 出 现 不 同 数据 类 型 之 间 的 运算 操作 , 例如 数值 和 字符 串 进 行 
加 法 运算 时 ， 会 将 拼接 成 的 完整 字符 串 作为 结果 。 数 学 运算 符 的 用 法 如 下 : 

/数值 的 加 、 减 、 乘 、 除 、 取 余 运算 


Var 3a=1; 
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var b=3; 

varc= af+b; /4 

var d = a*b; L113 

var e = b/a; /3 

var f= a%3; /1 
/数值 和 字符 串 + 运 算 

var g = at"hello"; /1hello" 
// 字 符 串 + 运 算 


var h = "hello"+"world"; //"helloworld" 


1-4 分支 语句 


对 于 编程 语言 ， 函 数 是 最 小 的 功能 单元 , 语句 是 最 小 的 处 理 单元 。 语 句 决 定 了 程序 执行 
的 结构 。 分 支 语 句 是 编程 中 十 分 重要 的 一 种 结构 , 如 果 没 有 分 支 语句 , 程序 便 无 智能 性 可 言 。 
和 C 语 言 类 似 ，JavaScript 中 的 常用 分 支 语句 有 if、ifelse、switch-case 等 。 示 例如 下 : 


leta=1; 
letb=2; 
if (a>b) { 
console.log("a>b"); 
jelse if(a<b){ 
console.log("a<b"); 
jelse{ 
console.log("a==b"); 
} 
switch(a) { 
case 1:{ 
console.log("a=—1"); 
hi 
break; 
case 2:{ 
console.log("a=—2"); 
} 
break; 
default:{ 
console.log("a"); 
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/将 打印 a<b a==1 

console.log0) 是 浏览 器 中 的 打印 函数 ， 它 会 将 结果 输出 到 Console 控 制 台 。 

分 支 语 句 给 了 程序 做 选择 的 能 力 ,笔者 建议 if 语 句 的 嵌 套 最 好 不 要 超过 3 层 ， 过 多 的 if 丹 
套 会 使 代码 读 起 来 非常 难于 理解 。 毕 竟 代 码 的 真正 意义 是 : 给 别人 看 ,顺便 可 以 在 机 器 上 


运行 。 
1-5 ”循环 语句 


计算 机 和 人 类 相 比 , 最 大 的 优势 在 于 重复 地 做 某 件 事情 。 对 于 程序 来 说 ,大 量 重 复 某 些 
计算 也 十 分 必要 。 例 如 , 统计 公司 中 1000 个 员工 的 薪资 , 笔者 相信 没有 任何 一 个 软件 工程 师 
会 将 同样 的 统计 代码 编写 1000 遍 。JavaScript 中 也 提供 了 几 种 基础 的 循环 语句 ， 例 如 while 语 
旬 、for 语 句 等 。 对 于 对 象 ，JavaScript 中 还 提供 了 遍历 对 象 属性 的 for-in 方 法 。 某 些 特殊 对 象 
(例如 数组 ) 中 封装 了 许多 迭代 方法 ,这些 会 在 后 面 的 章节 具体 介绍 。 在 JavaScript 中 ， 儿 种 
简单 的 循环 结构 示例 如 下 : 


//for 循环 

var a=0; 

for (vari=0;i<10;iH+) { 
a=at+l1; 

} 

console.log(a); /10 


//while 循环 
while(a>0){ 
a=a-1; 
) 
console.log(a); /0 


//do-while 循环 
dof 
a=a+1; 
}while(a<10); 
console.log(a); /10 
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1-6 函数 


函数 是 JavaScript 中 的 “第 一 等 公民 ”， 函 数 在 JavaScript 中 的 重要 性 和 高 级 特性 后 面 会 

有 专门 的 章节 进行 系统 地 介绍 。 在 JavaScript 中 ,函数 以 function 关 键 字 定义 ,当然 在 ES6 标 准 

中 , 也 可 以 使 用 箭头 函数 。 函数 是 实现 某 一 功能 的 代码 单元 , 例如 模拟 加 法 运算 , 代码 如 下 : 
function add(a,b) { 
return at+b; 


} 
console.log(add(1,2)); 


你 也 可 以 将 函数 赋值 给 变量 ,将 变量 作为 函数 进行 调用 ,这 种 函数 通常 被 称 为 匿名 函数 ， 
代码 如 下 : 
let addFunc = function(a,b){ 
return a+b; 
} 
console.log(addFunc(1,3)); 


如 果 使 用 箭头 函数 的 写法 ， 示 例 代码 如 下 : 


let newAdd = (a,b)=>{ 
return a+b; 

} 

console.log(newAdd(1,4)); 


1-7 ”理解 对 象 


JavaScript 是 一 种 面向 对 象 语言 ， 对 象 是 JavaScript 的 核心 。 你 可 以 简单 地 将 JavaScript 中 
的 对 象 理 解 为 键 值 映射 ， 在 其 他 语言 中 ， 这 种 数据 结构 通常 也 叫 作 Dictionary 或 Map 。 
JavaScript 中 内 置 了 许多 对 象 , 例如 Number 数 值 对 象 、String 字 符 串 对 象 等 。 你 也 可 以 创建 自 
定义 的 对 象 ， 代 码 如 下 : 


Var people={ 
name:'jaki', 
age:25 
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上 面 的 代码 定义 了 一 个 “人 ”对 象 ， 其 中 有 两 个 属性 ， 分 别 表示 这 个 人 的 姓名 和 年 龄 。 


对 象 中 除了 可 以 定义 属性 来 存储 对 象 的 内 容 外 ， 也 可 以 定义 方法 来 描述 对 象 的 行为 ， 例 如 : 


var people= 
name:jaki', 
age:25, 
sayHi:()=>{ 
console.log("Hello World"); 
由 
1 


无 论 是 访问 对 象 的 属性 还 是 调用 对 象 的 方法 ， 在 JavaScript 中 都 可 以 使 用 点 语法 ， 例 如 : 


console.log(people.name); 
people.sayHi(); 


如 果 你 有 其 他 语言 的 面向 对 象 编程 基础 ， 可 能 会 对 上 面 的 代码 有 些 疑 惑 ，JavaScript 中 


的 对 象 并 不 依赖 于 类 ， 后 面 章节 会 有 更 深入 的 专题 介绍 。 


1-8 数组 对 象 的 使 用 


数组 在 JavaScript 中 也 是 一 种 对 象 ， 其 是 JavaScript 内 置 的 Array 对 象 。 在 实际 开发 中 ， 数 


组 的 应 用 非常 广泛 。JavaScript 中 的 Array 对 象 存放 数据 的 类 型 也 十 分 自由 ， 并 不 需要 全 部 一 


致 ， 


例如 : 

var array = [1,"one"," 一 "]; 
console.log(array[0]); Nl 
console.log(array[1]); Jone 


JavaScript 中 的 数组 在 创建 时 也 没有 严格 的 长 度 限制 ， 你 可 以 在 需要 的 时 候 任意 增长 或 


缩短 数组 的 长 度 。 例 如 ， 使 用 push 方 法 可 以 在 数组 的 末尾 追加 元 素 ， 使 用 pop 方 法 也 可 以 将 
数组 末尾 的 元 素 删除 。 


array.pop(); 
array.push(2); 
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1-9 ”编写 国 年 判断 小 程序 


通过 上 面 的 概览 ,你 应 该 已 经 可 以 使 用 JavaScript 结 合 一 点 HTML 知 识 来 编写 简单 的 网 页 
小 程序 了 ( 例如 判断 某 个 年 份 是 否 为 国 年 ) 。 关 于 图 年 的 知识 ,笔者 相信 你 在 小 学 数学 课 上 
就 学 习 过 。 间 年 的 判断 条 件 为 : 可 以 被 4 整除 但 是 不 能 被 100 整 除 ， 或 者 可 以 直接 被 400 整 除 
的 年 份 。 下 面 就 来 编写 这 样 一 个 小 程序 。 

新 建 一 个 HTML 文 件 ， 在 其 中 编写 如 下 代码 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 闲 年 判断 小 程序 </title> 
<script type="text/javascript"> 
function checkO{ 
let value = document.getElementsByName("input")[0].value; 
if (INumber(value)) { 
alert(" 请 你 输入 正确 的 年 份 "); 
retum; 
} 
if (Number(value)%4===0 && Number(value)%100!==0) { 
alert(value+" 是 半年 !); 
jelse 让 (Number(value)%0400= 一 0) { 
alert(value+" 是 半年 1"); 
}else{ 
alert(value+" 是 平年 1"); 





} 
</script> 
<style type="text/css"> 
hlf 
text-align: center; 
} 
div{ 
text-align: center; 
} 


button { 
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margin-left 30px; 
} 

</style> 
<head> 
<body> 

<hl> 闵 年 判断 小 程序 <hl> 

<div><input type="text" name="input" /><button onclick="check0'"> 检 验 </button></div> 
</body> 
</htm> 


上 面 使 用 到 的 getElementsByName 方 法 是 document 对 象 内 置 的 方法 ， 可 以 通过 name 来 获 
取 一 组 标签 对 象 。 
在 浏览 器 中 打开 此 文件 ， 输 入 年 份 ， 即 可 进行 验证 ， 效 果 如 图 1-3 所 示 。 


半年 判断 小 程序 


1992 检验 





图 1-3 半年 判断 小 程序 
1-10 使 用 Sublime Text 来 编写 JavaScript 代码 


Chrome 浏 览 器 提供 的 开发 者 工具 虽然 强大 ,但 是 只 适用 于 已 完成 项 目的 检查 与 调试 ， 
无 法 用 来 进行 完整 项 目的 开发 。 可 以 编写 JavaScript 代 码 的 编辑 器 十 分 多 , 例如 专门 开发 大 型 
Web 项 目的 WebStorm 、 小 巧 的 用 于 开发 移动 端 网 页 的 HBuilder、 通 用 编辑 器 Sublime Text 等 
工具 。 对 于 JavaScript 语 法 部 分 的 学 习 ， 强 烈 建议 使 用 Sublime Text 工 具 。 首 先 ， 其 拥有 轻 量 
级 、 占 内 存 极 小 、 运 行 极 快 的 特点 。 其 次 ，Sublime Text 有 大 量 插件 支持 ,能 够 很 好 地 提供 
代码 高 亮 、 智 能 补 全 、 代 码 格式 化 等 高 级 开发 工具 所 提供 的 功能 。 最 重要 的 是 ,Sublime Text 
可 以 配置 编译 系统 ， 有 了 它 ， 我 们 就 不 再 需要 依赖 浏览 器 来 进行 JavaScript 代 码 的 运行 与 调 
试 了 。 

笔者 推荐 使 用 Sublime Text 3.0 版 本 ， 本 书 的 示例 操作 和 命令 都 是 以 3.0 为 准 的 。 

下 载 Sublime Text 最 新 版 本 的 网 址 : http://www.sublimetext.com/。 
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下 载 安装 完成 Sublime Text 后 ， 其 已 经 自 带 了 代码 高 亮 的 功能 ， 可 以 进行 JavaScript 代 码 
的 编写 , 但 是 并 没有 自动 补 全 、 代码 格式 化 与 运行 JavaScript 代 码 的 功能 oS 为 大 家 一 一 
解决 ， 现 在 我 们 将 把 Sublime Text 武 装 成 一 款 强大 的 JavaScript 编 辑 器 。 


安装 Sublime Text 插件 管理 器 PackageControl 


Sublime Text 的 插件 十 分 丰富 ， gp 装 所 需要 的 插件 很 不 容易 ， 如 果 你 
开发 0S 软件 的 经 验 ， 一 定 知 mh 第 三 方 库 管理 工具 。 对 应 Sublime Text， 
PackageControl 就 是 一 款 很 好 的 插件 管 

在 Sublime Text 中 有 两 种 方式 可 Ee JPackageControl 插 件 的 安装 : 第 一 种 方式 是 直接 在 
Sublime Text 的 控制 台 键入 如 下 代码 ， 之 后 按 Enter 键 来 进行 PackageControl 工 具 的 安装 : 


import urllib.request,os; pf = 'Package Control.sublime-package'; 

ipp = sublime.installed_packages_path(); 
urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); 
open(os.path.join(ipp, pf), ‘wb').write(urllib.request.urlopen( ‘http://sublime.wbond.net/' + 
ptf.replace(' ','%20")).read()) 


在 Sublime Text 中 使 用 Control+、 的 方式 可 以 直接 打开 控制 台 , 将 上 面 的 代码 粘贴 进去 并 
按 Enter 刍 进行 安装 ， 如 图 1-4 所 示 


</body> 


tml> 


http://sublime.wbond.net/Package%20Control. sublime-package 
byntaxError: invalid syntax 


>> import urllib,.request,os; 
>> import urllib, request,os; 


est.urlopen( 'http://sublime.wbond.net/' + pf.replace(’ 





图 1-4 使 用 代码 的 方式 进行 PackageControl 工具 的 安装 


第 二 种 安装 方式 是 直接 下 载 ， 手 动 安装 。 由 于 网 络 与 Sublime Text 版 本 更 新 不 可 控 ， 使 用 
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代码 进行 PackageControl 工 具 的 安装 不 一 定 会 成 功 ， 可 以 直接 下 载 PackageControl 进 行 安装 ， 
PackageControl 工 具 下 载 地 址 : http://sublime.wbond.net/Package%20Control.sublime-package。 
下 载 完 成 后 ， 如 图 1-5 所 示 ， 打 开 Sublime Text 工 具 的 插件 目录 : Preferences 一 Browse 


Packages。 


Er File 


About Sublime Text 
Check for Updates... 
Changelog... 


Edit 


Preferences 
Services 


Hide Sublime Text ”3H 
Hide Others tw%H 
Al 


Selection Find View Goto 








会 bcartNative 开 : YX 


Browse Packages.… 


Settings 
Settings ~ Syntax Specific 
Settings - Distraction Free 


Key Bindings 
Font 


图 1-5 Sublime Text 的 插件 目录 
将 下 载 到 的 PackageControl 安 装 文件 放 入 Installed Packages 文 件 夹 中 ， 如 图 1-6 所 示 。 


Cache 


> 0_package_c...ime-package 


[ET 到 Package Con..ime-package 


Local 
Packages 


bp 





bp 


图 1-6 将 PackageControl 安装 文件 放 入 Installed Packages 文件 夹 中 


之 后 将 Sublime Text 完 全 关 掉 , 重启 Sublime Text， 如 果 在 Preferences 中 可 以 看 到 Package 
Control 项 目 ， 说 明 已 经 成 功 安装 ， 如 图 1-7 所 示 。 


Bl File 
About Sublime Text 
Check for Updates... 
Changelog... 


Edit 


Preferences 
Services 


Hide Sublime Text ”3H 
Hide Others %H 
Show All 


p 


Quit Sublime Text  $%Q 


L 





Selection Find View Goto 


Browse Packages... 


Settings 
Settings -~ Syntax Specific 
Settings - Distraction Free 


Key Bindings 
Font 

Color Scheme 
Package Settings 
Package Control 


图 1-7 成 功 安装 PackageControl 工具 
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上 面 所 提供 的 PackageControl 安 装 包 下 载 地 址 服务 器 在 国外 ， 在 国内 访问 时 常会 出 现 波 
动 ， 如 果 你 无 法 从 上 面 的 地 址 下 载 PackageControl 安 装 包 ,可 以 尝试 如 下 地 址 : 


http://zyhshao.github.io/file/Package%20Control.sublime-package 
2. 使 用 PackageControl 安装 JavaScript 代码 智能 提示 插件 SublimeCodelntel 


对 代码 的 智能 提示 是 高 级 编辑 工具 必 备 的 一 项 功能 。SublimeCodeIntel 是 一 个 全 功能 的 
代码 自动 提示 插件 ， 支 持 众多 流行 的 程序 语言 ， 例 如 JavaScript、HTML、CSS 、Python 、 
PHP 等 。 

使 用 PackageControl 可 以 十 分 方便 地 进行 SublimeCodelIntel 插 件 的 安装 ,首先 打开 Sublime 
Text 编 辑 工 具 ， 在 Mac 电 脑 中 使 用 Command+Shift+P 来 打开 PackageControl 命 令 行 ， 在 其 中 输 
入 package control 便 会 自动 检索 出 PackageControl 工 具 所 提供 的 所 有 命令 ,PackageControl 工 具 
中 提供 了 许多 易 用 的 命令 ， 如 安装 插件 、 查 看 已 安装 的 插件 列表 、 删 除 插件 等 ， 如 图 1-8 
所 示 。 


package Control 


Package Control: Add Channel 

Package Control: Add Repository 

Package Control: Disable Package 

Package Control: Discover Packages 
Package Control: Enable Package 

Package Control: Install Package 

Package Control: List Packages 

Package Control: Remove Channel 

Package Control: Remove Package 

Package Control: Remove Repository 
Package Control: Satisfy Dependencies 
Package Control: Upgrade Package 
Package Control: Advanced Install Package 
Package Control: Create Package File 
Package Control: Install Local Dependency 
Package Control: List Unmanaged Packages 
Package Control: Upgrade/Overwrite All Packages 





图 1-8 PackageControl 工具 提供 的 命令 


也 可 以 通过 如 图 1-9 所 示 的 方式 打开 PackageControl 命 令 行 : Sublime Text-*Preference 一 
Package Control。 

在 PackageControl 命 令 行 中 输入 Install Package 并 按 Enter 键 就 会 进入 安装 插件 的 命令 行 ， 
此 时 会 自动 显示 插件 列表 ， 如 图 1-10 所 示 。 

在 其 中 输入 SublimeCodeIntel 后 按 Enter 键 进行 安装 即 可 ， 如 图 1-11 所 示 ( 安装 需要 数 分 
钟 时 间 ) 。 如 果 安 装 成 功 ， 在 Sublime Text 一 Preference 一 Package Setting 中 会 看 到 
SublimeCodelIntel 项 。 
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[% ELI File Edit Selection Find View Goto 


© About Sublime Text 
Check for Updates... 
Changelog... 

























Preferences Browse Packages... 















Services p Settings 8， 
Settings - Syntax Specific 


Settings ~ Distraction Free 
Key Bindings 


Font 
Color Scheme 
Package Settings 











Hide Sublime Text $%H 
Hide Others TR%H 
Show All 











Quit Sublime Text ”3Q 


Package Control 





图 1-9 打开 PackageControl 命令 行 


es 
1337 Color Scheme 

1337 -A Color Scheme for dark Sublime Text 

install v1.0.1; github.com/MarkMichos/1337-Scheme 

lSelf 

Track your activity with the 1self Sublime Text 2/3 Plugin 

install v0.0.17; www.1self.co/ 


3024 Color Scheme 

3024 theme for TextMate& Sublime Text 

install v2014.04.29.09.25.21; github.com/0x3024 

3D Tool Syntax Hilight 

Asynchronous Burst-Mode 3D Toolfor Sublime Text 

install v0.1.0; github.com/leoheck/sublime-3d-tool 

42 Headers 

Asublime text plug-in for the students of 42 

install v1.1.0; github.com/Globidev/Sublime-Text-42-Headers 
4GL 

4GL Syntax Package for Sublime Text 2 

install v2012.02.21.22.22.02; github.com/skarcha/SublimeText2-4GL 


图 1-10 插件 列表 


SublimeCodelntel 





Full-featured code intelligence and smart autocomplete engine 
install v2.2.0+st3; sublimecodeintel.github.io/SublimeCodelntel/ 





图 1-11 安装 SublimeCodeIntel 插件 


在 执行 Install Package 命 令 时 ，Sublime Text 会 从 PackageControl 官 方 网 站 拉 取 一 个 JSON 
文件 ， 这 个 文件 中 包含 所 有 Sublime Text 的 插件 信息 ， 大 小 在 数 兆 左右 。 不 幸 的 是 ， 由 于 国 


位 


第 1 章 快速 体验 JavaScript 


内 网 络 的 限制 ， 这 个 文件 的 下 载 依然 困难 重重 。 笔 者 个 人 维护 着 一 个 此 JSON 文 件 的 下 载 地 
址 , 无 法 成 功 拉 取 到 文件 的 朋友 可 以 尝试 通过 路 径 Sublime Text 一 Preferences 一 Package 
Settings 一 Package Control 一 Settings-User 打 开 用 户 配置 文件 ， 如 图 1-12 所 示 。 


File Edit Selection Find View Goto Tools Project Window Help 


About Sublime Text untitled 
Check for Updates... 
Changelog... 














Preferences Browse Packages... 


Services p Settings EN 
Settings - Syntax Specific 


Hide Sublime Text $8H Settings - Distraction Free 


Hide Others Tt%H 
Show Al Key Bindings 


Quit Sublime Text  $%Q Font 
Color Scheme 


Package Settings Package Control Pp Settings - Default 
Package Control Settings ~ User 


图 1-12 打开 Package Control 用 户 配 置 文件 


在 其 中 添加 如 下 配置 信息 





"channels": [ 
"http://zyhshao.github.io/file/channel_v3.json" 


]， 
添加 完成 后 ,配置 文件 看 上 去 如 图 1-13 所 示 





图 1-13 进行 用 户 配置 文件 设置 


上 面 已 经 将 插件 列表 JSON 文 件 的 拉 取 地 址 修改 为 http://zyhshao.github.io/file/ 
channel_v3.json。 

成 功 安 装 SublimeCodelIntel 插 件 后 ， 你 可 以 尝试 编写 一 些 JavaScript 人 代码， 可 以 看 到 
SublimeCodeIntel 插 件 的 智能 提示 十 分 强大 ， 如 图 1-14 所 示 。 
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abs (function) 
acos [functiom) 
atan (function) 
ceil (function) 


floor (function) 





图 1-14 SublimeCodelIntel 的 代码 智能 提示 


3. 安装 JavaScript 代码 格式 化 插件 


缩 进 规范 的 代码 会 使 我 们 在 编写 程序 时 赏心悦目 ， 在 PackageControl 的 插件 列表 中 输入 
JsFormat， 按 Enter 键 进行 此 插件 的 安装 ， 如 图 1-15 所 示 。 

安装 成 功 后 ， 同 样 可 以 在 Sublime Text 一 Preferences 一 Package Settings 中 看 到 JsFormat 项 。 

JsFormat 插 件 的 使 用 十 分 简单 , 选中 要 进行 格式 化 的 JavaScript 代 码 , 使 用 Control+Option 
(Alt ) +F 即 可 对 其 进行 格式 化 。 


JSFormat 

JsFormat 

javascript formatting for Sublime Text2& 3 

install v2016.12.21.18.21.08; github.com/jdc0589/jsFormat 
JSCS-Formatter 

Sublime Text 3 Plugin to Autoformat with JSCS 

install v2.0.0; github.com/TheSavior/SublimejSCSFormatter 
JSML Formatter 


ASublime Text 3 plugin to help write faster JSML. 
install v0.1.2; github.com/mjkaufer/JSML-Formatter 





图 1-15 安装 JsFormat 插件 
4. 在 Sublime Text 中 运行 JavaScript 代码 


前 边 我 们 做 了 很 多 工作 ， 安 装 了 一 些 易 用 的 Sublime Text 插 件 ， 这 些 工 具 可 以 帮助 我 们 
更 加 愉悦 地 进行 JavaScript 代 码 的 编写 。 代 码 的 编写 是 为 了 运行 , 以 学 习 而 言 , 能 够 实时 地 看 
到 代码 运行 的 结果 也 会 大 大 提高 学 习 效率 ，Sublime Text 自 带 对 Lua、 Python 、 Ruby 等 语言 的 
编译 运行 功能 ， 但 是 并 不 支持 JavaScript 语 言 ， 我 们 做 一 些 额外 的 配置 ， 来 使 Sublime Text 支 
持 运行 JavaScript 代 码 。 

Nodejs 是 一 款 JavaScript 运 行 时 编译 环境 ， 首 先 需 要 在 系统 中 安装 Node.js 环 境 ， 下 载 安 
装 包 地 址 : https://nodejs.org/en/。 
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安装 完 Nodejs 后 ， 打 开 终 端 工具 ， 在 其 中 输入 如 下 命令 来 查看 Nodejs 的 路 径 : 


$which node 


打开 Sublime Text 工 具 ， 选 择 其 中 的 Tools 一 Build System 一 New Build System， 如 图 1-16 


所 示 。 在 新 建 的 文件 中 写 入 如 下 信息 : 


"cmd": ["/usr/local/bin/node", "$file"], 


"selector": "source.js" 


eT Project Window Help 


Command Palette... 
Snippets... 


Build System 
Build 

Build With... 
Cancel Build 
Build Results 
Save All on Build 


Record Macro 
Playback Macro 
Save Macro... 
Macros 


Developer 


全 8P 








Ant 
C++ Single File 
Cargo 
D 
Erlang 
Haskell 
JavaC 
Lua 
Make 
Python 
R 


Ruby 
Rust 
Syntax Tests 


New Build System... 


图 1-16 新 建 编译 工具 


需要 注意 ， 上 面 的 /user/local/bin/node 部 分 需要 替换 成 你 在 终端 中 使 用 which node 命 令 查 
找到 的 路 径 。 之 后 将 文件 进行 保存 ， 命 名 为 JavaScriptsublime-build 即 可 。 

新 建 一 个 Sublime Text 文 件 ， 将 其 命名 为 textjs。 将 Tools 一 Build System 中 的 编译 工具 选 
择 新 创建 的 JavaScript, 编写 一 段 JavaScript 测 试 代码 , 使 用 Command+B 进 行 代码 的 编译 运行 ， 
可 以 看 到 ， 在 Sublime Text 控 制 台 打 印 出 了 代码 的 执行 结果 与 所 耗 时 间 ， 如 图 1-17 所 示 。 

到 此 ， 已 经 配置 完成 了 一 款 十 分 快速 且 强 大 的 JavaScript 代 码 学 习 工具 ， 后 面 我 们 将 使 
用 Sublime Text 来 一 步 步 进 入 JavaScript 的 编程 世界 ， 一 起 玩 起 来 吧 ! 


15 


现代 JavaScript 编程 : 经 典范 例 与 实践 技巧 


到 D25 
[Finished in 0.1s] 





图 1-17 在 Sublime Text 编辑 器 中 进行 JavaScript 代码 的 执行 
1-11 JavaScript 的 语法 特点 


JavaScript 是 一 种 对 大 小 写字 母 敏感 的 语言 ， 也 就 是 说 ， 无 论 是 变量 名 、 函 数 名 还 是 其 
他 ， 都 是 区 分 大 小 写 的 。 例 如 ， 下 面 的 代码 声明 了 两 个 完全 不 同 的 变量 : 

// 大 小 写 敏感 

var name; 

var NAME; 


如 果 你 熟悉 一 些 编译 型 语言 ， 例 如 C++、Java、Swift， 那么 你 可 能 会 固执 地 认为 所 有 变 
量 都 要 有 强制 的 类 型 以 确定 其 在 内 存 中 分 配 的 空间 大 小 。 但 是 , 学 习 JavaScript 时 , 你 需要 忘 
记 这 条 准则 。 JavaScript 中 的 变量 是 动态 弱 类 型 的 , 你 可 以 将 一 个 变量 先 赋值 为 字符 串 类 型 的 
值 ， 再 将 其 修改 为 数值 类 型 的 值 。 总之, JavaScript 中 的 变量 没有 特定 的 类 型 ， 你 可 以 将 其 赋 
值 为 任意 类 型 的 值 。 示 例如 下 : 


/动态 类 型 

var dy = "string" /字符 串 
dy=1 /数字 
dy=true 1/ 布尔 


虽然 JavaScript 人 允许 对 一 个 变量 进行 多 种 类 型 值 的 赋值 ， 但 是 在 开发 中 ， 笔 者 还 是 强烈 
建议 不 要 这 样 做 ,规范 与 固定 意义 的 变量 会 使 你 的 项 目 看 起 来 赏心悦目 。 
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在 JavaScript 中 ,每 行 结尾 的 分 号 可 有 可 无 ， 这 一 点 十 分 类 似 Swift 语 言 , 但 是 需要 注意 ， 
如 果 你 在 同一 行 中 写 了 多 条 语句 , 需要 使 用 分 号 进行 语句 的 分 隔 。 良好 的 代码 风格 习惯 是 一 
行内 只 写 一 条 语句 , 并 且 加 上 分 号 , 这 样 做 不 仅 方 便 进 行 代码 的 压缩 , 而 且 在 调试 时 可 以 很 
好 地 暴露 出 现 问 题 代码 所 在 的 位 置 。 示 例如 下 : 

/ 洋 于 分 号 

var valuel = 1; 


var value2 = 2; console.log(value2); 
varvalue3 =3 ”// 行 末尾 可 以 省 略 分 号 


在 JavaScript 中 ， 可 以 使 用 反 斜 杠 进行 字符 串 的 折 行 编写 ， 有 些 时 候 这 样 做 可 以 使 你 的 
代码 看 起 来 更 加 漂亮 ， 示 例如 下 : 

/使 用 反 斜 杠 进行 字符 串 的 折 行 

var value4 ="\ 

Welcome to JavaScript \ 

My Good Friend!"; 

console.log(value4); 


任何 编程 语言 都 会 提供 注释 的 能 力 ,一 个 优秀 的 开发 者 不 仅 会 写 代 码 , 更 需要 会 写 注释 。 
JavaScript 中 有 两 种 方式 进行 注释 的 编写 ， 其 完全 遵照 了 C 语 言 的 注释 风格 。 使 用 双 斜 杠 进行 
单行 注释 ， 使 用 双 斜 杠 中 间 向 入 两 个 星 号 来 进行 多 行 注释 ， 示 例如 下 : 

/这 里 是 单行 注释 

/本 

这 里 是 多 行 注释 

4/ 


1-12 编程 练习 


练习 1: 在 Chrome 浏 览 器 的 调试 模式 下 ， 使 用 alert 函 数 在 当前 网 页 上 弹出 一 个 警告 框 。 

解析 : 

在 Chrome 浏 览 器 中 使 用 快捷 键 Command+Option+J 可 以 快速 打开 调试 模式 ， 在 Console 
区 键入 如 下 代码 后 按 回 车 键 : 


alert(" 你 好 ，Google"); 
弹出 窗口 效果 ， 如 图 1-18 所 示 。 
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b= 


m 


洪 应 用 国 来 自 www.google.com.pe 上 的 一 个 嵌入 式 页 面 





ia | 


你 好 ，Google 


再 





图 1-18 在 网 页 弹出 警告 框 


练习 2: 使 用 JavaScript 表 达 式 描述 语句 :3 加 5 的 和 与 6 的 乘积 除 以 12。 
解析 : 
var result = (3+5)*6/12; 
练习 3: 使 用 JavaScript 实 现 简单 逻辑 : 如 果 小 明 的 年 龄 大 于 12 岁 ， 小 明 就 可 以 参加 夏令 
否则 不 能 参加 夏令 营 ， 小 明 的 真实 年 龄 是 10 岁 。 
解析 : 
var xiaomingAge = 10; 
if(xiaomingAge > 12){ 
console.log(" 可 以 参加 夏令 营 "); 


}else{ 
console.log(" 不 能 参加 夏令 营 "); 


} 

练习 4: 试 着 使 用 JavaScript 编 写 求 10 的 阶乘 的 运算 。 
解析 : 

let result = 1; 


for(leti= 1;i<=10;i++){ 
result = result*i; 
} 
console.log(result); //3628800 
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练习 5: 将 例 4 中 的 计算 过 程 封装 成 函数 。 
解析 : 
function func(param){ 
let result= 1; 
for(let i= 1;i<=10:iH+){ 
result = result*i; 


} 
return result; 
} 
console.log(func(10)); //3628800 


练习 6: 对 象 是 JavaScript 描 述 复杂 数据 类 型 的 方式 ， 试 着 用 对 象 来 描述 一 辆 商品 汽车 。 
要 求 : 奔驰 牌 汽 车 ， 价 格 是 2 500 000 元 ， 颜 色 是 红色 的 ， 有 自动 芍 驶 和 人 工 鸭 驶 两 种 行 
解析 : 
varcar={ 
brand:" 奔 驰 "， 
price:"2500000", 
color:"red", 
go:function(isAuto){ 
if (isAuto) { 
console.log(" 正 在 自动 驾驶 "); 
}else{ 
console.log(" 正 在 人 工 驾 驶 "); 
} 


b 


练习 7: 使 用 数组 存放 班级 10 名 学 生 的 期 末 考 试 成 绩 : 67、76、87、56、98、98、67、 
89、78、67。 
解析 : 


var record = [67, 76, 87, 56, 98, 98, 67, 89, 78, 67]; 
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ECMAScript 是 JavaScript 的 核心 语法 标准 ， 它 是 JavaScript 中 最 重要 的 组 成 部 分 。 本 章 将 
通过 一 系列 范例 来 帮助 你 窥探 ECMAScript 的 语法 世界 。 对 于 一 门 高 级 编程 语言 ， 在 学 习 时 
你 只 需要 把 握 两 条 主线 : 面向 过 程 与 面向 对 象 。 在 学 习 面 向 过 程 时 ， 要 注意 语言 的 变量 、 函 
数 、 和 运算、 流程、 分支 、 循 环 、 跳 转 等 关键 点 ; 在 学 习 面 向 对 象 时 ， 则 要 注意 语言 的 对 象 、 
类 、 属 性 、 方 法、 继承 、 扩 展 等 关键 点 。JavaScript 语 言 有 高 效 的 面向 过 程 的 特点 ,又 有 强大 
的 基于 原型 的 面向 对 象 的 能 力 。 现 在 ,我 们 就 一 起 开始 探索 这 门神 奇 的 语言 吧 。 


2-1 理解 变量 


变量 一 词 来 源 于 数学 ,其 代表 函数 中 能 够 发 生 改 变 的 量 值 。 在 计算 机 语言 中 , 用 于 存储 
计算 结构 或 表示 值 的 抽象 概念 。 需 要 注意 ,变量 有 可 能 是 可 变 的 , 也 有 可 能 是 不 可 变 的 , 变 
量具 体 的 意义 由 不 同 的 编程 语言 所 定义 ,在 JavaScript 中 ,使 用 var( var 是 variable 单 词 的 缩写 )、 
let 和 const 关 键 字 来 进行 变量 的 声明 。 

如 果 你 看 过 一 些 JavaScript 程 序 ， 可 能 会 发 现 其 中 充斥 着 大 量 var 关 键 字 。 确 实 如 此 ，let 
和 const 关 键 字 是 ECMAScript 6 之 后 引入 的 新 特性 ， 老 版 本 的 ECMAScript 中 只 有 var 一 个 关键 
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字 来 进行 变量 的 声明 和 定义 。 关 于 声明 与 定义 , 最 大 的 区 别 是 : 声明 只 是 在 程序 中 预定 了 一 
个 变量 名 称 ， 不 需要 进行 存储 空间 的 建立 ; 定义 则 是 对 变量 进行 赋值 ， 需 要 建立 存储 空间 。 
示例 代码 如 下 : 


/变量 的 声明 与 定义 
varname; // 进 行 变量 的 声明 
var age = 25; /进行 变量 的 定义 
尔 也 可 以 在 同一 语句 中 进行 多 个 变量 的 声明 或 定义 ， 例 如 : 
// 进 行 多 个 变量 的 声明 
let a,b,c,d,e=3; 
console.log(a,b,c,d,e); //undefined undefined undefined undefined 3 


let 和 const 关 键 字 在 声明 和 定义 变量 时 ， 语 法 和 var 关 键 字 完全 一 致 。 不 同 的 是 ，let 声 明 
的 变量 会 受 作用 域 的 影响 ，const 定 义 的 变量 不 能 够 被 修改 ， 也 可 以 将 其 理解 为 “常量 ”。 


2-2 ”变量 的 命名 


在 对 变量 进行 命名 时 ， 需 牢记 下 面 两 条 规则 : 
(1 ) 变量 名 的 第 1 个 字符 必须 是 字母 、 下 画 线 或 者 美元 符号 。 
(2 ) 除了 第 1 个 字符 之 外 ， 其 余 字符 可 以 是 下 画 线 、 美 元 符号 或 者 任意 数字 与 字母 。 
下 面 这 些 变量 名 都 是 合法 的 : 
var_myName ,MyName,$name, 3name,n3; 
下 面 这 些 变 量 名 都 是 非法 的 : 
// 不 合法 的 变量 名 


var 31; 
Var %2; 


虽然 JavaScript 对 变量 的 命名 比较 自由 ， 但 并 不 意味 着 开发 者 在 命名 变量 时 可 以 随心 所 
和 欲 。 正 确 地 对 变量 命名 应 该 能 够 做 到 见 形 知 意 ,并且 从 外 观 上 看 起 来 不 突 无 ,很 自然 。 比 较 
著名 的 变量 命名 方法 有 如 下 儿 种 : 


1.Camel (驼峰 ) 命名 法 
Camel 命 名 法 是 指 变量 的 首 字母 小 写 ， 接 下 来 的 每 个 单词 的 首 字 母 大 写 ， 示 例如 下 : 
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/驼峰 命名 法 


var myName; 


2. Pascal 命名 法 


Pascal 命 名 法 是 指 变量 的 首 字母 进行 大 写 ， 
命名 法 有 时 也 被 称 为 大 驼峰 命名 法 ， 示 例如 下 : 


//Pascal 命名 法 
var MyName; 


3. 匈牙利 类 型 命名 法 


其 后 每 个 单词 的 首 字 母 也 进行 大 写 ，Pascal 


Camel 与 Pascal 命 名 法 只 针对 变量 的 意义 进行 解释 ， 匈 牙 利 类 型 命名 法 中 还 加 入 了 变量 
的 类 型 ， 其 规则 是 在 Pascal 命 名 法 的 基础 上 ， 在 变量 名 的 最 前 面 加 上 变量 类 型 的 标识 。 例 如 
数字 型 变量 添加 标识、 字符 串 变量 添加 s 标 识 ， 示 例如 下 : 


/匈牙利 类 型 命名 法 
variAge=25; 
var SName = 'jaki'; 


表 2-1 列 出 了 常用 类 型 对 应 的 标识 。 


表 2-1 常用 类 型 对 应 的 标识 


标 识 


叫 











正则 表达 式 





字符 串 





任意 类 型 





< | |3 |o | | |™ |= 


另外 ， 对 于 一 些 大 小 写 不 敏感 的 编程 语言 ， 也 常 


4. 下 画 线 命名 法 


也 常常 采用 下 画 线 命名 法 。 


单词 与 单词 之 间 使 用 下 画 线 进行 分 割 ， 示 例如 下 : 
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/下 画 线 命名 法 


var my_name; 


作用 域 与 作用 域 链 

作用 域 对 于 一 门 编程 语言 至 关 重 要 , 在 许多 编程 语言 中 , 都 以 大 括号 进行 作用 域 的 划分 。 
例如 ，C 语 言 中 的 fot 循 环 体 、while 循 环 体 、if 分 支 块 等 构成 一 个 作用 域 ， 在 其 中 定义 的 变量 
只 在 作用 域内 有 效 , 出 了 作用 域 则 不 能 被 访问 到 。 在 ECMAScript 中 , 除了 块 级 作用 域外 ( 与 
let 相 关 ) ， 作 用 域 是 以 函数 来 进行 区 分 的 ， 初 学 者 往往 会 在 这 里 产生 迷惑 。 

作用 域 控制 着 变量 的 可 见 性 与 生命 周期 。 在 进行 软件 设计 时 , 开发 者 应 该 遵循 最 小 暴露 
原则 ， 将 一 些 不 必要 的 变量 和 函数 隐藏 起 来 。ECMAScript 中 的 作用 域 可 以 笼统 地 划分 为 两 
类 : 全 局 作用 域 与 局 部 作用 域 。 全 局 作用 域 中 的 变量 和 函数 在 代码 中 的 任何 地 方 都 可 以 访问 
到 (最 外 层 函数 和 定义 的 变量 ) ， 例 如 : 

/全 局 作用 域 

function globalFuncO){ 

console.log("globalFunce"); 

} 

var name = 'Jaki'; 

var age = 25; 


上 面 代码 中 的 函数 globalFunc、 变 量 name 和 age 都 在 全 局 作用 域内 。 


/局 部 作用 域 
function subBlockO{ 
var subject = 'JavaScript’; 
function show(param){ 
console.log("subBlock "+param); 
) 
show(subject); 
} 
/console.log(subject); /程序 会 抛 出 异常 
// show("s"); // 程 序 会 抛 出 异常 
subBlock(); //subBlock JavaScript 


上 面 代码 中 的 subBlock 函 数 创建 了 一 个 局 部 作用 域 , 其 中 的 变量 subject 和 函数 show 都 只 
能 在 其 作用 域内 进行 访问 。 

另外 , 在 进行 变量 访问 时 ，ECMAScript 会 遵循 作用 域 链 的 方式 从 内 到 外 逐 层 访 问 ， 如 
果 在 内 层 作 用 域 中 可 以 访问 到 变量 ， 就 会 停止 寻找 ， 示 例如 下 : 
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function func(){ 
console.log(name); // 访 问 到 全 局 作用 域 的 name 
} 
function func20{ 
Var name = ' 到 少 '; 
console.log(name); // 访 问 到 局 部 作用 域 的 name 
} 
func20; // 巫 少 
func(); /Jaki 
由 此 可 知 ， 在 ECMAScript 中 ， 如 果 你 频繁 访问 一 个 全 局 作用 域 中 的 变量 ， 将 是 十 分 影 
响 性 能 的 。 


2-3 ”变量 提升 


ECMAScript 中 有 一 个 十 分 奇怪 的 语法 规则 : 变量 提升 。 如 果 你 使 用 了 一 个 从 未 声明 过 
的 变量 , 程序 运行 会 直接 抛 出 异常 。 但 是 如 果 代码 中 有 过 对 此 变量 的 声明 , 无 论 在 声明 前 使 
用 还 是 在 声明 后 使 用 ， 程 序 都 不 会 抛 出 异常 ， 例 如 : 


// 变 量 提升 

console.log(name); Wundefined 
var name = "Jaki"; 

console.log(name); /Jaki 


还 有 一 点 , 如 果 你 直接 对 一 个 未 经 声明 的 变量 进行 赋值 , 就 相当 于 直接 在 全 局 作用 域 中 
创建 了 这 样 一 个 变量 ， 这 是 一 种 十 分 危险 的 做 法 ， 会 造成 无 意 的 变量 泄露 ， 例 如 : 

// 变 量 泄露 

function funcO{ 

age =24; // 泄 露 为 全 局 变量 

b 

funcO; 

console.log(age); /1/24 


造成 这 种 语法 特性 的 原因 是 : JavaScript 解 释 器 在 对 代码 进行 扫描 时 ， 会 将 全 局 作用 域 
中 声明 的 变量 和 函数 先 定义 为 全 局 符号 , 运行 到 具体 声明 处 才 进 行 赋值 。 这 种 语法 特性 多 多 
少 少 会 对 开发 者 造成 一 些 误解 ， 在 许多 流行 的 编程 语言 中 ， 变 量 在 声明 之 前 是 不 能 使 用 的 。 
如 果 说 上 面 的 示例 代码 你 仍然 觉得 没有 什么 好 紧张 的 ， 那 么 下 面 的 代码 就 能 说 明 问 题 了 : 
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/变量 提升 
console.log(name); Wundefined 
if (false) { 
var name = "Jaki"; 
} 


for(vari=0;i<3;i+){ 


var sum = i; 
} 
console.log(i); /3 
console.log(sum); /2 


上 面 的 示例 代码 中 ， 首 先 if 条 件 判断 语句 值 为 假 ， 这 代码 块 永远 不 会 执行 到 ,但 是 从 打 
印 结果 可 以 看 出 , 第 一 句 打印 并 未 抛 出 异常 , name 变 量 还 是 被 声明 了 ,而 后 面 的 循环 结构 中 ， 
我 们 在 for 循 环 条 件 结构 中 声明 了 一 个 变量 ,在 循环 体内 声明 了 sum 变 量 , 可 是 当 循环 结束 后 ， 
变量 依然 存在 , 变 成 了 全 局 变量 。 sum 变 量 同 样 也 变 成 了 全 局 变量 , 这 种 所 谓 的 “变量 提升 ” 
会 消耗 一 部 分 无 用 内 存 ， 并 对 之 后 的 代码 编写 产生 额外 的 风险 。 在 ES6 标 准 中 ， 新 引入 块 级 
作用 域 可 以 完美 地 解决 这 些 问题 ， 下 一 示例 中 再 来 研究 let 与 块 级 作用 域 。 


2-4” 块 级 作用 域 


ES6 标 准 中 的 块 级 作用 域 实际 上 是 由 let 与 const 关 键 字 决 定 的 。 在 ES6 标 准 中 新 引入 了 let 
和 const 关 键 字 ， 其 用 法 与 var 关 键 字 十 分 类 似 ， 都 是 进行 变量 的 声明 。 不 同 的 是 ，var 声 明 的 
变量 会 存在 变量 泄露 和 变量 提升 , 从 而 成 为 全 局 变量 的 问题 。 而 let 和 const 声 明 的 变量 则 只 在 
其 所 在 的 代码 块 中 有 效 。 所谓 代 码 块 , 即 由 大 括号 包 庄 起 来 的 区 域 , 其 可 以 是 一 些 常 用 的 语 
法 结构 ， 如 分 支 结构 、 循 环 结构 等 ， 也 可 以 是 开发 者 自行 创建 的 区 域 。 示 例如 下 : 

// 块 级 作用 域 

{ 


var a= 10; 

let b= 10; 

console.log(b); /10 
} 
console.log(a); 10 
console.log(b); /程序 抛 出 异常 


上 面 的 代码 当 程序 运行 到 console.log(b) 时 会 抛 出 异常 。 也 就 是 说 ， 使 用 let 命 令 声明 的 变 
量 ， 一 旦 脱离 其 所 在 的 代码 块 ， 这 个 变量 就 不 能 再 被 使 用 。 这 种 局 部 变量 十 分 适合 用 于 for 
循环 结构 ， 例 如 : 
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for(let i=0;i<3:iH+){ 

} 

console.log(i); // 程 序 抛 出 异常 

let 命 令 还 有 一 个 规则 ， 其 不 存在 变量 提升 ， 即 在 变量 声明 之 前 ， 此 变量 是 不 可 使 用 的 ， 
而 不 是 undefined， 例 如 : 


console.log(a); // 程 序 抛 出 异常 


leta= 10; 

使 用 let 声 明 的 变量 也 不 可 以 进行 重复 声明 ， 如 下 的 写法 也 会 抛 出 异常 : 
leta= 10; 

leta= 11; /程序 抛 出 异常 


关于 块 级 作用 域 还 有 一 个 特点 需要 特别 注意 ， 如 果 在 块 级 作用 域内 使 用 let 或 const 声 明 
了 某 个 变量 ,那么 此 作用 域 会 形成 对 此 变量 的 屏蔽 。 也 就 是 说 ， 即 便 外 层 作 用 域 中 也 有 同名 
的 变量 ， 也 会 被 屏蔽 掉 ， 这 种 语法 特性 被 称 为 暂时 性 死 区 ， 示 例如 下 : 


let tmp = 10; 

{ 
console.log(tmp); // 程 序 抛 出 异 党 
let tmp= 11; 
console.log(tmp); Ml 


} 


上 面 的 示例 代码 说 明 , 在 块 级 作用 域 中 使 用 let 声 明了 变量 , 那么 在 声明 之 前 , 这 个 变量 
都 不 能 使 用 ( 尽管 全 局 中 也 定义 了 同名 的 变量 ) 。 

我 们 回 过 头 再 来 理解 一 下 块 级 作用 域 。 在 ES5 标 准 中 是 没有 块 级 作用 域 这 个 概念 的 ,我 
们 在 编写 代码 时 , 很 容易 产生 内 层 变 量 覆盖 外 层 变量 和 局 部 变量 泄露 为 全 局 变量 的 问题 。 块 
级 作用 域 使 作用 域内 的 变量 不 受 外 界 影响 ,同时 也 不 会 影响 外 界 , 提高 了 代码 的 安全 性 。 同 
时 ， 抉 级 作用 域 也 是 可 以 说 套 的 ， 外 层 作 用 域 无 法 读 取 内 层 作 用 域 的 变量 ， 示 例如 下 : 

// 将 打印 

让 

Hello World 


let a= "New"; 


{ 
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leta="Wa"; 
{ 
let a = "Hello World"; 
console.log(a); 
} 
console.log(a); 
} 


console.log(a); 


} 


对 于 函数 的 声明 ,在 ES6 中 也 是 遵守 块 级 作用 域 规则 的 ， 在 作用 域内 声明 的 函数 只 能 在 
作用 域内 使 用 ， 例 如 : 
1 
let func = function(){ 


console.log("function"); 


} 
func(); //function 


} 
func(); // 程 序 抛 出 异常 


2-5 “ECMAScript 中 的 数据 类 型 


变量 是 用 来 存储 特定 意义 的 值 。 在 JavaScript 中 ， 变 量 可 以 存储 两 种 类 型 的 值 : 原始 值 
和 引用 值 。 原始 值 和 引用 值 的 区 别 在 于 存储 的 位 置 与 访问 的 方式 不 同 。 原 始 值 是 存储 在 栈 中 
的 简单 数据 ， 引 用 值 是 存储 在 堆 中 的 对 象 数据 。 也 就 是 说 ， 当 你 通过 变量 名 访问 原始 值 时 ， 
会 直接 访问 到 其 存储 在 栈 中 的 数据 ; 而 通过 变量 名 访问 引用 值 时 , 会 首先 获取 存储 在 栈 中 的 
对 象 地 址 ， 根 据 地 址 再 向 堆 中 查找 真正 的 对 象 数据 。ECMAScript 中 定义 的 原始 类 型 有 5 种 ， 
分 别 为 Undefined ( 未 定义 类 型 ) 、Null ( 空 对 象 类 型 ) 、Boolean ( 布尔 类 型 ) 、Number ( 数 
字 类 型 ) 、String (字符 串 ) 类 型 。 图 2-1 描 述 了 原始 值 与 引用 值 的 差异 。 

原始 值 所 占 的 内 存 大 小 一 般 是 固定 不 变 的 ， 将 其 存储 到 栈 中 可 以 更 快 地 进行 数据 访问 。 
而 引用 值 所 占 的 内 存 通常 较 大 并 且 不 固定 , 但 其 地 址 所 占 的 内 存 大 小 是 固定 不 变 的 , 将 其 地 
址 存 入 栈 中 不 会 影响 性 能 。 在 5 种 原始 类 型 中 ，String 类 型 十 分 特殊 ,因为 其 大 小 也 是 不 固定 
的 。 在 Java、Objective-C 等 语言 中 , 字符 串通 常会 被 定义 为 引用 类 型 ， 但 JavaScript 中 依然 将 
其 作为 一 种 原始 类 型 。 
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对 象 1 引 用 值 : xxxx0001 
时 象 2 引 用 值 : xxxx0002| 


图 2-1 原始 值 与 引用 值 图 示 


字符 串 原始 值 :“Hello” xxxx0002 地 址 空间 : 
. 对 象 2{...} 





2-6 ”再 看 const 关键 字 


我 们 前 面 提 到 ，const 关 键 字 用 来 声明 的 变量 不 可 修改 。 在 许多 编程 语言 中 ， 除 了 有 变 
量 的 概念 ， 还 有 常量 的 概念 。 常 量 就 是 值 不 能 改变 的 量 ， 在 ES6 标 准 中 ,使 用 const 关 键 字 来 
进行 常量 的 声明 。 修 改 常量 的 值 会 使 程序 抛 出 异常 ， 示 例如 下 : 

const PI = 3.14; 

PI= 3; // 抛 出 异常 

需要 注意 ， 在 使 用 const 声 明 变 量 时 ， 要 同时 为 其 进行 赋值 ， 一 旦 const 变 量 被 定义 ， 后 
面 就 不 能 够 再 对 它 进行 修改 。 const 关 键 字 声明 的 变量 和 let 关 键 字 声 明 的 变量 享有 同样 的 作用 
域 规则 ， 这 里 不 再 袭 述 。 

const 声 明 的 常量 有 一 点 需要 额外 注意 ， 即 const 实 际 保证 的 是 常量 空间 存储 的 数据 不 可 
被 修改 ， 而 常量 所 对 应 的 值 有 时 是 可 以 修改 的 。 例 如 , 常量 对 应 的 是 一 个 对 象 ， 你 可 以 修改 
此 对 象 的 属性 和 方法 ， 但 不 可 以 直接 将 此 常量 指向 的 对 象 修改 掉 ， 示 例如 下 : 


const teacher = { 


name:"Jaki", 
age:25 
要 
/对 对 象 进行 修改 没 问题 


teacher.name = "Lucy"; 
teacher.age = 24; 
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/直接 修改 常量 的 指向 则 会 报错 
teacher = { 

name:"Lucy", 

age:24 


2-7 Undefined 与 Null 


前 面 讲 过 ，JavaScript 中 定义 的 原始 类 型 有 5 种 : Undefined、Null、Boolean、Number、 
String。 切 记 , 只 有 这 5 种 原始 类 型 .原始 类 型 数据 是 直接 使 用 字面 值 来 创建 的 .其 中 ,Undefined 
和 Null 类 型 比较 特殊 。 

Undefined 类 型 只 有 一 个 值 ， 即 undefined。 其 意义 也 如 所 描述 的 那样 ， 即 未 被 定义 的 。 
例如 ， 一 个 变量 只 是 被 声明 ， 其 值 就 是 undefined， 其 类 型 就 是 Undefined 类 型 。JavaScript 中 
的 typeof 尖 键 字 可 以 用 来 获取 变量 或 值 的 类 型 ， 示 例如 下 : 

/Undefined 类 型 


var unKnown; 
console.log(typeof unKnown); /将 打印 undefined 


需要 注意 , 仅仅 被 声明 但 未 被 赋值 的 变量 是 未 定义 的 , 实际 上 从 没有 声明 过 的 变量 也 是 
未 定义 的 ， 示 例如 下 : 

/未 声明 过 的 变量 也 是 未 定义 的 

console.log(typeof unKnown2); /将 打印 undefined 

typeo 人 是 一 个 特殊 的 运算 符 ， 但 如 果 将 未 声明 过 的 变量 用 于 其 他 运算 符 ， 将 会 产生 运行 
错误 。 

执行 一 个 没有 返回 值 的 函数 后 ， 也 会 返回 undefined 值 ， 示 例如 下 : 

/1 个 无 返回 值 的 函数 

function func(){ 


console.log("funce"); 


} 
var v1 = func(); // 将 打印 fanc 
console.log(v1); // 将 打印 undefined 


可 能 你 现在 对 函数 还 不 太 理解 ， 不 用 担心 ， 后 面 我 们 会 专门 学 习 函 数 的 相关 内 容 。 
Null 类 型 是 ECMAScript 中 另 一 种 只 有 一 个 值 的 类 型 其 字面 值 为 null。Null 类 型 的 定义 
唯一 的 用 途 是 作为 空 对 象 的 占 位 。 现 在， 你 可 能 对 对 象 也 不 太 理解 , 在 介绍 原始 值 与 引用 值 
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时 提 到 过 对 象 ， 对 象 是 一 种 复杂 数据 类 型 ， 对 象 变量 中 实际 存储 的 是 对 象 的 引用 地 址 。 
ECMAScript 中 的 对 象 不 属于 原始 类 型 ， 原 则 上 它们 之 间 并 不 会 产生 强 关 系 ， 然 而 在 实际 开 
发 中 , 开发 者 往往 需要 一 种 约定 的 值 来 表示 空 对 象 , 即 要 有 一 个 约定 的 值 来 描述 一 个 无 用 的 
地 址 ,这 个 值 就 是 null。 开 发 者 在 使 用 对 象 前 , 发 现 变量 中 存储 的 引用 地 址 为 null 时 ,就 知道 
此 对 象 还 没有 被 初始 化 ， 或 者 此 对 象 已 经 不 存在 了 。 

如 果 在 JavaScript 中 使 用 typeof 来 对 null 值 进行 类 型 检查 ， 你 会 惊奇 地 发 现 其 返回 的 类 型 
是 object, 这 或 许 是 JavaScript 前 期 实现 上 的 一 个 错误 , 但 是 其 也 恰恰 与 null 是 空 对 象 的 占 位 这 
一 概念 完全 契合 。 因 此 ， 在 ECMAScript 标 准 中 沿用 了 这 一 定义 。 示 例如 下 : 

/Null 类 型 

var obj = null; 

console.log(typeof obj); // 将 打印 object 

现实 世界 中 , 很 多 设计 可 能 都 不 是 最 正确 的 , 却 无 疑 是 最 合适 的 。 一 个 很 有 趣 的 例子 来 
自 键盘 设计 。 客 观 地 说 ， 目 前 主流 键盘 布局 并 不 科学 ， 这 种 “QWERTY” 布 局 的 键盘 设计 
之 初 是 供 打字 机 用 的 , 而 “ABCDEF” 排序 的 键盘 在 打字 速度 过 快 时 , 往往 会 产生 卡 顿 问题 。 
为 了 解决 这 个 问题 ， 克 里 斯 托 夫 ' 拉 森 … 肖 尔 斯 刻意 将 高 频 字符 放置 在 相反 的 方向 ,以 最 大 
限度 地 放 慢 敲 刍 速度 。 也 就 是 说 ,现代 键盘 的 布局 设计 是 为 了 降低 打字 速度 。 另 一 种 更 科学 
的 键盘 布局 方式 为 DVORAK 布 局 ， 如 果 在 互联 网 上 搜索 DVORAK 关 键 字 ， 你 会 搜 出 很 多 理 
由 阐述 这 种 布局 的 好 处 , 然而 其 依旧 无 法 成 为 主流 ， 人们 的 习惯 根深 蒂 固 且 不 会 轻易 尝试 去 


2-8 ”关于 Boolean 类 型 


Boolean 定 义 的 原始 值 有 两 个 ， 分 别 为 true 和 false。 通 俗 地 讲 ，Boolean 值 就 是 用 来 描述 
事物 的 真 与 假 ， 是 与 非 的 概念 , 其 在 逻辑 运算 中 有 着 很 广泛 的 应 用 , 一 个 简单 的 条 件 结 构 示 
例如 下 : 


var number = 10; 
var result = number>10; 
if (result) { 

console.log(" 大 于 10"); 
}else{ 

console.log(" 不 大 于 10"); 
} 
// 将 打印 不 大 于 10 
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上 面 代码 中 的 number>10 其 实 是 一 种 比较 运算 ， 其 运算 的 结果 就 是 Boolean 值 。 


2-9 关于 Number 类 型 


Number 类 型 用 来 描述 数字 ， 和 其 他 编程 语言 不 同 的 是 : JavaScript 中 的 Number 类 型 既 可 
以 描述 整数 值 ， 也 可 以 描述 浮 点 值 。 示 例如 下 : 


/Number 类 型 

varnuml = 100 // 整 数值 
varnum2 = 3.14 // 浮 点 值 
console.log(typeof num1); // 将 打印 number 
console.log(typeof num2); /将 打印 number 


在 数值 前 添加 前 级 可 以 将 其 描述 为 八进制 或 十 六 进 制 的 数值 ,八进制 需要 将 0 作为 前 级 ， 
-六 进 制 需要 将 0x 作 为 前 级 ， 示 例如 下 : 


/八进制 

varnum3 = 011; /对 应 十 进 制 9 
/十 六 进 制 

var num4 = 0x11; /对 应 十 进 制 17 


需要 注意 ,很 多 编程 语言 并 不 介意 数值 量 前 面 是 否 添加 前 级 0，JavaScript 语 言 对 这 一 点 
要 求 十 分 严格 ， 多 余 的 0 会 改变 数值 的 进 制 方式 ， 造 成 不 可 控 的 错误 。 

对 于 非常 大 或 非常 小 的 数值 ，JavaScript 中 也 可 以 使 用 科学 计数 法 进行 描述 ， 使 用 字母 e 
来 描述 10 的 e 次 方 ， 示 例如 下 : 


/科学 计数 法 
varnums = 1.01e3; /对 应 1010 
varnum6 = 1111000e-6; // 对 应 1.111 


JavaScript 中 还 定义 了 一 些 特殊 的 数值 ，Number.MAX _VALUE 和 Number.MIN_VALUE 
分 别 用 来 表示 Number 类 型 所 能 表示 的 最 大 值 与 最 小 值 ， 示 例如 下 : 


/Number 最 大 可 以 表示 的 值 

console.log(Number.MAX VALUE); /打印 1.7976931348623157e+308 
/Number 最 小 可 以 表示 的 值 

console.log(Number.MIN_VALUE); /打印 Se-324 


当 计算 值 超出 了 Number 类 型 所 能 表示 的 极限 时 ， 会 被 认 作 无 穷 。JavaScript 中 也 专门 定义 
了 特殊 的 Number 值 来 表示 无 穷 ， 其 中 Number.POSITIVE_INFINITY 表示 正 无 穷 大 ， 
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NumberNEGATIVE INFINITY 表 示 负 无 穷 大 ， 它 们 的 值 分 别 为 Infinity 与 -Infinity ， 示 例如 下 : 





/W 正 无 穷 
console.log(Number.POSITIVE_INFINITY); // 将 打印 Infinity 
// 负 无 穷 
console.log(Number.NEGATIVE INFINITY); // 将 打印 -Infinity 


JavaScript 中 定义 的 最 后 一 个 比较 特殊 的 Number 值 为 NaN, 为 Not a Number 的 缩写 , 表示 


不 是 一 个 数字 。 这 个 值 在 字符 串 向 数字 转换 失败 时 会 被 返回 ， 示 例如 下 : 


/NaN 值 
varnum7 = Number("w"); 
console.log(num7); /将 打印 NaN 


需要 注意 , NaN 这 个 值 十 分 特殊 ， 其 不 可 以 进行 计算 也 不 可 以 进行 比较 , 并 且 与 其 自身 


也 不 相等 ， 例 如 如 下 的 比较 将 会 返回 false: 


console.log(NaN 一 NaN); /将 打印 false 
如 果 要 判断 一 个 变量 的 值 是 否 是 NaN， 需 要 使 用 如 下 方法 : 
console.log(isNaN(num7)); /将 返回 true 


2-10 ”关于 String 类 型 


String 类 型 是 ECMAScript 中 唯一 没有 固定 大 小 的 原始 类 型 ， 用 来 存储 多 个 Unicode 字 符 。 


在 C、Java 等 语言 中 ， 字 符 和 字符 串 是 两 种 不 同 的 类 型 ,字符 使 用 单 引 号 包 庄 ， 字 符 串 则 使 用 
双 引 号 包 庄 。 在 ECMAScript 中 删 去 了 字符 的 概念 ， 字 符 串 可 以 使 用 单 引号 包 庄 ， 也 可 以 使 用 
双 引 号 包 庄 ， 但 是 如 果 要 在 字符 串 中 媒 套 字符 串 ， 单 双 引 号 必须 交替 使 用 。 示 例如 下 : 
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/String 类 型 

var strl = "Hello"; 

var str2 = "World'; 

var str3 = "Hello "World™; 


和 C、Swift、Java、Perl 等 语言 类 似 ，JavaScript 中 也 定义 了 一 些 转 义 字 符 , 如 表 2-2 所 示 。 
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表 2-2” ”JavaScript 中 的 转 义 字符 



































转 义 字符 含义 

\n 换行 

At 制 表 符 

\b 空格 

Yr 回 车 

¥f 换 页 符 

\ 反 斜 杠 

a 单 引号 

ie 双 引 号 

\Onnn 使 用 八进制 代码 表示 字符 
\xnn 使 用 十 六 进 制 代码 表示 字符 
\unnnn 使 用 十 六 进 制 Unicode 码 表 示 字 符 





某 些 编程 语言 会 定义 专门 的 函数 来 拼接 处 理 字 符 串 。 当 然 在 ECMAScript 中 ，String 对 象 
里 也 定义 了 许多 操作 字符 串 的 方法 。 对 于 字符 串 拼接 ,更 简单 的 方法 是 直接 使 用 加 法 运算 符 ， 
示例 如 下 : 


/字符 串 的 拼接 
var str4 = "hello"+" "+"world"; 
console.log(str4); //hello world 


2-11 对 象 简介 


ECMAScript 中 的 引用 类 型 实际 上 指 的 就 是 对 象 。 对 象 是 一 组 功能 行为 互补 的 数据 集合 ， 
其 可 以 用 来 模拟 实现 生活 中 的 事物 。 举 一 个 简单 的 例子 ， 如 果 要 开发 一 款 教学 系统 ， 这 个 系 
统 中 需要 包含 老师 和 学 生 两 类 成 员 。 其 中 , 老师 就 是 一 种 对 象 ， 学 生 也 是 一 种 对 象 。 老 师 对 
象 中 可 能 会 包含 姓名 、 教 师 编号 、 专 业 、 所 带班 级 等 ， 学 生 对 象 中 可 能 会 包含 姓名 、 年 龄 、 
所 学 课程 、 所 在 班级 等 。 当 然 ， 除了 这 些 描述 对 象 属性 的 数据 外 ,对 象 中 还 需要 包含 一 些 行 
为 ， 例 如 老师 要 进行 教学 、 学 生 要 学 习 考 试 等 。 在 ECMAScript 中 ，Object 类 型 就 是 这 样 一 种 
引用 类 型 ， 其 创建 出 来 的 实例 被 称 为 对 象 。 

对 象 的 创建 有 两 种 方式 ， 第 一 种 ， 可 以 直接 通过 Object 构造 方法 来 新 建 对 象 。 以 教师 对 
象 为 例 ， 代 码 如 下 : 
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/创建 教师 对 象 

varteacher= new Object(); 

/为 教师 对 象 添加 一 些 属性 

teacher.name = ' 盘 少 '; 

teacher.age= 25; 

teacher.subject = 'JavaScript'; 

/为 教师 对 象 添加 行为 方法 

teacher.teach = function(){ 
console.log(' 正 在 进行 教学 .…); 

B 

上 面 的 代码 为 教师 对 象 添加 了 姓名 、 年 龄 和 所 教科 目的 属性 , 并 且 为 其 添加 了 一 个 教学 


行为 teach 的 方法 。 


第 二 种 ， 也 可 以 直接 通过 字面 值 的 方式 来 创建 教师 对 象 ， 示 例如 下 : 
// 字 面值 直接 创建 对 象 


var teacher2= { 
name:'Jaki', 
age:25, 
teach:function(O){ 
console.log(' 正 在 进行 教学 .…); 


例如 : 


H 
}; 
如 果 将 teacher 对 象 与 teacher2 对 象 的 类 型 都 进行 打印 ， 可 以 看 到 它们 都 是 Object 类 型 ， 
console.log(teacher); //{ name: ' 开 少 ', age: 25, subject: 'JavaScript', teach: [Function] } 
console.log(teacher2); //{ name: Jaki' age: 25, teach: [Function] } 
console.log(typeof teacher); //object 


console.log(typeof teacher2); //object 


要 使 用 对 象 的 某 个 属性 , 有 两 种 方式 可 以 获取 , 比较 方便 且 常 用 的 方式 是 点 语法 ,示例 


如 下 : 


// 取 对 象 的 属性 

console.log(teacher.name); // 下 少 
console.log(teacher.age); /125 
console.log(teacher.subject); //JavaScript 


也 可 以 通过 键 名 字符 串 的 方式 来 获取 对 象 的 属性 ， 示 例如 下 : 


第 2 章 ECMAScript 的 语法 世界 


// 通 过 键 名 字符 串 取 值 

console.log(teacher['name']); // 下 少 

需要 注意 ,通过 键 名 字符 串 的 方式 来 取 对 象 的 属性 时 ,所 传 入 的 键 必须 是 字符 串 类 型 的 。 

对 象 中 定义 的 函数 用 来 描述 对 象 的 行为 , 同样 可 以 使 用 点 语法 来 使 对 象 执行 行为 , 示例 
如 下 : 


/让 对 象 执行 行为 

teacher.teach(); /将 打印 正在 进行 教学 ... 
同样 ， 使 用 键 名 获取 到 的 方法 也 可 以 执行 : 
teacher['teach'](); /将 打印 正在 进行 教学 … 


至 此 ,我 们 可 以 简单 理解 ,万 事 万 物 都 可 以 作为 对 象 (但 并 不 是 全 部 ) 。 基 本 的 数据 组 
合 为 简单 的 对 象 ， 简 单 的 对 象 组 合成 复杂 的 对 象 ， 复 杂 的 对 象 协作 完成 复杂 的 功能 。 这 里 ， 
对 于 “对 象 ”我 们 不 做 深入 的 研究 ， 后 面 会 详细 介绍 更 加 复杂 的 面向 对 象 机 制 。 


2-12 算术 运算 符 


运算 符 是 用 来 执行 程序 代码 运算 的 。 一 个 完整 的 表达 式 应 该 由 两 部 分 组 成 : 操作 数 与 运 
算 符 。 例 如 ， 简 单 的 加 法 表达 式 “1+2” 中 ， 数 字 “1” 和 数字 “2” 都 是 操作 数 ， 符 号 “+” 
是 加 法 运算 符 ， 其 作用 是 将 前 后 两 个 操作 数 进行 加 法 运算 。 

在 ECMAScript 中 ， 运 算 符 可 以 分 为 如 下 几 类 : 


(1 ) 算术 运算 符 。 

(2 ) 赋值 运算 符 。 

(3 ) 关系 运算 符 。 

(4 ) 邮 辑 运算 符 。 

(5 ) 位 运算 符 。 

(6 ) 自 增 、 自 减 、 条 件 、 喜 号 等 特殊 运算 符 。 


其 中 ,算术 运算 符 用 来 做 常见 的 数学 运算 ,例如 加 、 减 、 乘 、 除 等 ,符号 +" 是 ECMAScript 
中 的 加 法 运算 符 ， 数 字 或 者 字符 串 都 可 以 使 用 “+” 运 算 符 进行 相 加 操作 。 示 例如 下 : 


// 加 法 运算 中 的 几 个 特殊 规则 
console.log(1+NaN); lI/NaN 
console.log(Infinity+Infinity); //Infinity 
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console.log(-Infinity + -Infinity) //-Infinity 

console.log(1+1"); Ml 

在 数学 中 ， 与 加 法 互 为 逆 运 算 的 是 减法 ，JavaScript 中 使 用 符号 “-” 来 进行 减法 运算 ， 
示例 如 下 : 

// 减 法 运算 符 

var sub = 10-5; 

console.log(sub); /S 

减法 运算 符 有 一 点 非常 特殊 , 如 果 进 行 减法 运算 的 两 个 操作 数 中 有 字符 串 类 型 , 且 其 中 
的 字符 串 类 型 可 以 转换 为 数字 , 则 JavaScript 会 自动 将 其 转换 为 数字 再 进行 减法 运算 。 但 如 果 
其 中 有 字符 串 不 能 转换 为 数字 ， 则 计算 结果 为 NaN， 示 例如 下 : 


console.log("10"-5); /5 
console.log("10"-"3"); /7T 
console.log("s"-3); /NaN 
console.log("10"-"a"); /NaN 


针对 一 些 特 殊 值 的 减法 运算 ，JavaScript 中 也 定义 了 一 些 规 则 ， 如 下 : 


(1 ) 如 果 某 个 操作 数 是 NaN， 则 运算 的 结果 为 NaN。 
(2 ) 正 无 穷 值 减 去 正 无 穷 值 ， 结 果 为 NaN。 

(3 ) 负 无 穷 值 减 去 负 无 穷 值 ， 结 果 为 NaN。 

(4 ) 正 无 穷 值 减 去 负 无 穷 值 ， 结 果 为 正 无 穷 值 。 

(5 ) 负 无 穷 值 减 去 正 无 穷 值 ， 结 果 为 负 无 穷 值 。 


示例 如 下 : 

/减法 运算 中 的 几 个 特殊 规则 
console.log(1-NaN); /NaN 
console.log(Infinity-Infinity); /NaN 
console.log(-Infinity - -Infinity); /NaN 
console.log(Infinity - -Infinity); /Infinity 
console.log(-Infinity - Infinity); /Infinity 


当 符号 “+” 与 符号 “-” 作 为 一 元 运算 符 时 ， 它 就 成 了 正 号 运算 符 与 负 号 运算 符 。 对 数 
字 进 行 正 号 或 负 号 运算 时 ， 正 号 运算 会 保持 数字 的 正 负 性 ， 负 号 运算 会 改变 数字 的 正 负 性 ， 
示例 如 下 : 


console.log(+num!1); // 不 改变 符号 10 
console.log(+num2); /不 改变 符号 -10 
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console.log(-numl): /改变 符号 -10 
console.log(-num2); /改变 符号 10 
正 负 运算 符 还 有 一 个 很 实际 的 用 途 , 即 可 以 将 字符 串 值 强制 转 成 数字 值 , 这 在 开发 中 十 
分 常用 。 示 例如 下 : 


console.log(typeof +"1") //number 
ECMAScript 中 使 用 乘法 运算 符 “*” 来 进行 乘法 运算 ， 示 例如 下 : 
/乘法 运算 符 


var mul = 3*4; 
console.log(mul); /12 


对 于 乘法 运算 ， 也 存在 下 面 几 条 特殊 的 规则 : 

(1 ) 如 果 某 个 操作 数 是 NaN， 则 结果 为 NaN。 

(2 ) 无 穷 值 乘 以 0， 结 果 为 NaN。 

(3 ) 无 穷 值 乘 以 0 以 外 的 其 他 数字 ， 结 果 为 无 穷 值 。 
(4 ) 无 穷 值 乘 以 无 穷 值 ， 结 果 为 无 穷 值 。 


示例 代码 如 下 : 

/乘法 运算 中 的 几 个 特殊 规则 
console.log(1*NaN); /NaN 
console.log(Infinity*0); /NaN 
console.log(Infinity * 1); //Infinity 
console.log(Infinity * -1); //-Infinity 
console.log(Infinity * Infinity); //Infinity 
console.log(-Infinity * -Infinity); //Infinity 
console.log(-Infinity * Infinity); //-Infinity 
运算 符 “/” 在 ECMAScript 中 用 来 进行 除法 运算 ， 示 例如 下 : 
/除法 运算 符 

var del = 88/10; 

console.log(del); //8.8 


除法 运算 符 对 于 特殊 值 运算 的 规则 如 下 : 

(1 ) 如 果 某 个 操作 数 是 NaN， 则 结果 为 NaN。 
(2 ) 无 穷 值 除 以 无 穷 值 ， 结 果 为 NaN。 

(3 ) 无 穷 值 除 以 非 无 穷 值 ， 结 果 为 无 穷 值 。 
(4 ) 非 无 穷 值 除 以 无 穷 值 ， 结 果 为 0。 
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(5 ) 任何 数 除 以 0， 结 果 为 无 穷 值 。 
(6 ) 0 除 以 任何 数 ， 结 果 为 0。 


示例 代码 如 下 : 

/除法 运算 中 的 几 个 特殊 规则 

console.log(10/NaN); /NaN 

console.log(Infinity/Infinity); /NaN 

console.log(Infinity/100); //Infinity 

console.log(10/Infinity); /0 

console.log(100/0); //Infinity 

console.log(0/100); /0 

ECMAScript 中 还 支持 求 余 运 算 ， 取 余 运 算 也 叫 取 模 运 算 。 符 号 “%” 为 取 模 运算 符 。 
示例 如 下 : 

/ 取 模 运算 符 

varres = 17%8; 

console.log(res); M1 

Var res2= 10.7%1.5 

console.log(res2); // 约 等 0.2 


对 于 特殊 值 的 取 模 运 算 ， 有 如 下 规则 : 


(1 ) 无 穷 值 对 任何 值 取 模 结果 都 是 NaN。 

(2 ) 非 无 穷 值 对 无 穷 值 取 模 结果 为 非 无 穷 值 本 身 。 
(3 ) 0 对 任何 数 取 模 结 果 都 是 0。 

(4 ) 任何 数 对 0 取 模 结果 都 是 NaN。 


示例 代码 如 下 : 

/ 取 模 运算 中 的 几 个 特殊 规则 
console.log(Infinity%1); lI/NaN 
console.log(Infinity%Infinity); I/NaN 
console.log(100%Infinity); /100 
console.log(0%100); /0 
console.log(100%0); lI/NaN 


需要 注意 ， 在 很 多 编程 语言 中 ， 取 模 运 算 都 不 可 以 以 浮 点 数 作为 操作 数 。JavaScript 是 


一 种 相对 特殊 的 语言 ， 它 并 没有 对 浮 点 数 的 取 模 运 算 做 太 严格 的 控制 。 


38 


第 2 章 “ECMAScript 的 语法 世界 


2-13 ”赋值 运算 符 


赋值 运算 符 的 作用 是 将 表达 式 的 值 赋 给 变量 。 从 接触 到 ECMAScript 语 言 开始 ， 我 们 就 
一 直 在 使 用 赋值 运算 符 ， 最 简单 的 赋值 运算 符 使 用 示例 如 下 : 


/赋值 运算 符 


var string = "Hello World"; 


ECMAScript 中 还 提供 了 一 些 复合 赋值 运算 符 ， 示 例如 下 : 


// 复 合 运 算 符 

// 复 合 加 赋值 运算 符 

var v1 = 0; 

v1+=10; /相当 于 vl=v1+10; 
console.log(v1); /10 

v1-=9; /1/ 相 当 于 vl=v1-9; 
console.log(v1); /1 

v1*=10; /相当 于 v1=v1*10; 
console.log(v1); /10 

v1/=10; /相当 于 v1l=v1/10; 
console.log(v1); /1 

vl&=0; /相当 于 v1l=v1&0; 
console.log(v1); /0 

vll=1; /相当 于 v1=vll1; 
console.log(v1); Nl 

v1<<=1; /相当 于 v1=v1<<1; 
console.log(v1); /2 

v1>>=1; /相当 于 vl=v1>>1; 
console.log(v1); Nl 

vl>>>=1; /相当 于 vl=v1>>>1; 


console.log(v1); 

其 中 ，“&”“|”“<<” 等 符号 可 能 看 上 去 有 些 陌生 ， 这 些 是 ECMAScript 中 的 位 运算 
符 ， 后 面 会 专门 介绍 位 运算 的 相关 知识 ,这 里 你 只 需要 记 住 , 复合 赋值 运算 符 实际 上 是 将 一 
个 变量 作为 操作 数 ， 经 过 计算 后 再 赋值 给 它 自身 。 
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2-14 ”关系 运算 符 


在 代码 的 编写 过 程 中 ,比较 操作 十 分 常用 , 例如 比较 两 个 字符 串 是 否 相 同 、 比 较 两 个 数 
字 的 大 小 等 。 比 较 运算 符 的 计算 结果 将 会 返回 一 个 布尔 值 , 通过 布尔 值 的 真 或 假 可 以 实现 不 


同 的 业务 多 辑 。 
数字 之 间 的 比较 是 最 常规 的 比较 ， 示 例如 下 : 
// 数 字 之 间 的 比较 
console.log(1<2); /ltrue 
console.log(1>2); //false 
console.log(1 一 2); //false 


符号 “<” 为 小 于 运算 符 ， 当 第 1 个 操作 数 小 于 第 2 个 操作 数 时 ， 结 果 为 tue， 否 则 结果 
为 false。“>” 为 大 于 运算 符 ， 当 第 1 个 操作 数 大 于 第 2 个 操作 数 时 ,结果 为 tue， 否 则 结果 为 
false。 需 要 额外 注意 ， 在 ECMAScript 中 ， 等 于 运算 符 用 符号 “一 ”来 表示 ， 这 和 数学 中 的 
“=” 有 些 差异 ,初学 者 容易 混淆 ， 需 特别 注意 。 

比较 运算 符 也 可 以 用 于 字符 串 与 字符 串 之 间 的 比较 操作 ， 字 符 串 的 比较 遵守 这 样 的 法 
则 : 逐 字符 进行 字符 码 大 小 的 比较 ， 如果 字 符 码 相同 ,就 比较 下 一 个 字符 ， 直 到 比较 出 结果 
或 者 比较 完 所 有 字符 。 示 例如 下 : 


// 字 符 串 与 字符 串 进行 比较 

console.log("a">"b"); //false 

console.log("a"<"b"); //true 

console.log("ss"—"ss"); /l/ltrue 

需要 特别 注意 ， 如 果 是 描述 数字 的 字符 串 ， 比 较 时 依然 会 遵守 上 面 的 法 则 ， 例 如 : 
console.log("12">"3"); //false 


“12”>“3” 的 比较 结果 返回 的 是 false， 这 是 正确 的 。 因 为 JavaScript 解 释 程 序 会 将 字 
符 “1” 与 字符 “3” 的 字符 码 进行 比较 ， 将 结果 返回 。 

数字 和 字符 串 进 行 比较 相对 要 棘手 些 , 首 先 ,如 果 是 描述 数字 的 字符 串 与 数字 进行 比较 ， 
JavaScript 解 释 程 序 会 将 字符 串 强 制 转 换 成 数字 类 型 后 再 进行 比较 ， 例 如 : 


console.log("3">10); //false 
如 果 是 非 数 字 的 字符 串 与 数字 进行 比较 ,结果 将 永远 是 false。 
console.log("a">0); //false 
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”进行 不 小 于 和 不 大 于 的 比较 运算 ， 其 规则 和 


ECMAScript 中 还 可 以 使 用 “>=” 与 “< 
“>” 符 号 与 “<” 符 号 一 致 。 示 例如 下 : 
console.log(12<=12); /ltrue 
console.log(1>=2); //false 
关于 等 于 与 不 等 于 的 比较 ， 在 ECMAScript 中 有 两 类 : 一 类 是 相等 比较 “==” 与 不 相等 
比较 “!=” ; 另 一 类 是 全 等 比较 “= 一 ”与 不 全 等 比较 “!==”。 全 等 比较 运算 并 非 是 ECMAScript 
语言 所 独 有 的 ， 许 多 编程 语言 中 都 有 类 似 的 运算 符 ， 例 如 Swift。 
在 进行 相等 或 不 相等 比较 时 ， 不 同类 型 间 数 据 的 比较 遵守 如 下 几 条 原则 : 
(1 ) 布尔 值 在 比较 运算 前 会 被 转换 成 数值 ，true 转 换 成 1，false 转 换 成 0。 
(2 ) 描述 数字 的 字符 串 与 数字 进行 比较 前 会 被 转换 成 数字 。 
(3 ) 对 象 和 字符 串 进行 比较 前 ， 会 将 对 象 转换 成 字符 串 "[object Object]"。 
(4 ) null 值 和 undefined 值 进行 相等 比较 ， 结 果 为 true。 


示例 代码 如 下 : 

console.log(true—1); //true 

console.log(2==true); //false 
console.log(false==0); /ltrue 

console.log("11" 一 11); //true 


var obj = {name:'jaki'}; 
console.log(obj=="[object Object]"); ~ //true 
console.log(1!=2); /ltrue 
console.log(null 一 undefined); /true 
需要 注意 ， 如 果 进 行 比 较 操 作 的 是 引用 值 而 非 原始 值 ， 则 比较 的 实际 是 所 引用 对 象 的 
地 址 。 
再 次 提醒 ，NaN 与 NaN 进 行 相等 比较 ， 结 果 是 false。 
“一 ”与 “= ”运算 在 进行 比较 前 ,会 根据 上 面 的 规则 对 操作 数 进行 类 型 的 转换 ,全 等 
运算 符 “ 一 =-” 与 不 全 等 运算 符 “! 一 ”在 比较 前 不 会 做 任何 类 型 转换 ， 换 句 话说 ， 全 等 和 不 
全 等 进行 比较 时 , 既 会 比较 类 型 ,又 会 比较 值 ， 只 有 类 型 和 值 完全 相等 的 两 个 操作 数 才 被 认 


为 是 全 等 。 示 例如 下 : 


// 全 等 比较 
console.log(11=—="11");  //false 
console.log(true! 一 1); /ltrue 


有 一 个 很 有 趣 的 小 例子 ， 在 JavaScript 中 ， 如 果 下 面 的 代码 输出 false: 
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console.log(ex>1); 
那么 如 下 代码 将 一 定 输出 true 么 ? 
console.log(ex< 一 1); 


答案 是 否定 的 ,如 果 ex 变 量 在 进行 比较 转换 时 被 转换 成 了 NaN, 那么 上 面 两 句 输出 的 都 
将 是 false: 


Var ex 三 "SS"; 
console.log(ex>1); /false 
console.log(ex< 一 1); //false 


2-15 ”逻辑 运算 符 


迪 辑 运算 对 于 一 门 编程 语言 至 关 重 要 ， 它 是 分 支 和 循环 结构 的 基础 ，ECMAScript 中 支 
持 的 逻辑 运算 有 3 种 : 迪 辑 与 运算 、 迪 辑 或 运算 和 迪 辑 非 运 算 。 

ECMAScript 中 使 用 符号 “&&” 进 行 迪 辑 与 运算 。 风 辑 运 算 通 常 在 两 个 布尔 类 型 的 操作 
数 之 间 进 行 ，“ 与 ”运算 需要 遵守 表 2-3 所 示 的 运算 规则 。 


表 2-3 “与 ”运算 符 的 运算 规则 


操作 数 1 
true 
true 
false 


false 
上 面 的 运算 规则 可 以 简要 概述 为 :进行 逻辑 与 运算 的 两 个 操作 数 都 为 rue， 结 果 才 为 
true， 只 要 有 一 个 操作 数 为 false， 结果 就 为 false。 
在 有 些 强 类 型 的 编程 语言 中 ， 迪 辑 运算 符 只 能 在 布尔 值 之 间 进 行 运 算 ， 在 ECMAScript 
中 ， 风 辑 运 算 的 操作 数 可 以 是 任意 类 型 的 ,， 并且 其 运算 结果 也 不 一 定 是 布尔 类 型 的 值 ， 规定 
如 下 : 





(1 ) 在 两 个 对 象 间 进行 迪 辑 与 运算 , 结果 将 返回 第 二 个 对 象 。 

(2 ) 在 进行 凶 辑 与 运算 的 两 个 操作 数 中 ,如 果 有 一 个 操作 数 为 null， 则 结果 为 null。 
(3 ) 在 进行 迎 辑 与 运算 的 两 个 操作 数 中 ,如 果 有 一 个 操作 数 为 NaN， 则 结果 为 NaN。 
(4 ) 在 进行 逻辑 与 运算 的 两 个 操作 数 中 ， 如 果 有 一 个 操作 数 为 undefined， 则 结果 为 


undefined。 
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示例 代码 如 下 : 
// 与 运算 的 相关 规则 


var obj = {name:'jaki}; 


1/ 两 个 对 象 进行 逻辑 与 运算 ， 结 果 为 第 二 个 对 象 


console.log( {} &&ob)); 

console.log(null&&true):; /null 
console.log(true&&null); /null 
console.log(NaN&&true); lI/NaN 
console.log(true&&NaN); /NaN 
console.log(undefined&&true); //undefined 
console.log(true&&undefined); //undefined 
下 面 来 看 一 个 十 分 有 趣 的 小 例子 : 

varvl = 10; 

Var V2 = true; 


console.log(v2&&(v1++)); 
console.log(v1); 

var v3 = 10; 

Var v4 = false; 
console.log(v4&&(v3++)); 
console.log(v3); 


你 能 猿 出 上 面 代码 中 的 console.log(v1) 与 console.log(v3) 分 别 会 打印 出 什么 样 的 结果 吗 ? 

结果 是 console.log(v1) 将 打印 出 11， 而 console.log(v3) 将 打印 出 10。 

对 上 面 的 结果 是 不 是 有 些 意 外 ?其 实 很 多 编程 语言 在 处 理 迪 辑 运算 时 都 有 这 样 一 种 法 
则 : 如 果 第 一 个 操作 数 已 经 可 以 确定 此 表达 式 的 结果 ， 则 不 会 再 执行 第 二 个 操作 数 。 从 上 面 
的 代码 来 看 ，v4 为 false 时 ， 已 经 可 以 确定 此 与 运算 结果 为 false， 因 此 v3++ 将 不 会 被 执行 到 。 

ECMAScript 中 使 用 符号 “||” 进 行 迪 辑 或 运算 。 迪 辑 或 运算 遵守 表 2-4 所 示 的 运算 规则 。 


表 2-4 “||” 运 算 符 的 运算 规则 
操作 数 1 操作 数 2 


true true 
true false 


false true 

















false false 


和 逻辑 与 运算 一 样 ，ECMAScript 中 的 逻辑 或 运算 也 不 一 定 会 返回 逻辑 值 。 规 定 如 下 : 
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(1 ) 如 果 有 一 个 操作 数 为 对 象 ， 当 对 象 为 第 1 个 操作 数 时 ,结果 为 对 象 本 身 ; 当 对 象 为 
第 2 个 操作 数 时 ， 如 果 第 1 个 操作 数 为 false， 则 结果 为 对 象 本 身 ， 如 果 第 1 个 操作 数 为 tue， 则 
结果 为 true。 

(2 ) 如 果 两 个 操作 数 都 为 对 象 ， 则 返回 第 一 个 操作 数 。 


示例 代码 如 下 : 

/或 运算 规则 
console.log(objllfalse); /obj 
console.log(truellobj); /true 
console.log( {}|lob)); /0 


因此 , 在 进行 逻辑 或 运算 时 ,如 果 第 一 个 操作 数 已 经 可 以 决定 表达 式 的 值 ， 则 不 会 再 执 
行 到 第 二 个 操作 数 处 。 

ECMAScript 中 的 逻辑 非 运算 使 用 “! ”符号 定义 ,需要 注意 ， 迪 辑 非 运 算 一 定 会 返回 
布尔 值 。 罗 和 辑 非 运算 也 被 称 为 则 辑 取 反 运算 ， 其 遵守 表 2-5 所 示 的 运算 规则 。 


表 2-5 “! ”运算 符 的 运算 规则 
操作 数 结 果 
True false 
False true 


当 操作 数 不 全 是 迎 辑 值 时 ， 有 如 下 规则 : 
(1 ) 如 果 操 作 数 是 对 象 ， 则 返回 false。 

(2 ) 如 果 操 作 数 是 数字 0， 则 返回 true。 
(3 ) 如 果 操作 数 是 非 0 数字 ， 则 返回 false。 
(4 ) 如 果 操 作 数 是 null， 则 返回 true。 

(5 ) 如 果 操 作 数 是 NaN， 则 返回 true。 

(6 ) 如 果 操 作 数 是 undefined， 则 返回 true。 


2-16 ”位 运算 符 


我 们 知道 ， 程 序 中 的 所 有 数 在 计算 机 内 存 中 都 是 以 二 进 制 的 形式 存储 的 。 这 很 好 理解 ， 
进 制 的 实质 是 确定 计数 时 逢 几 进 一 。 人 类 有 10 只 手指 , 因此 很 久 以 前 , 祖先 就 习惯 了 使 用 十 
进 制 来 计数 。 计算机 的 核心 是 由 电子 元 件 组 成 的 , 而 电子 元 件 最 容易 描述 的 两 种 状态 是 高 电 
平 与 低 电 平 ， 因 此 使 用 二 进 制 计数 是 最 安全 、 最 便捷 的 方式 。 
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在 介绍 ECMAScript 中 的 位 运算 前 ， 先 来 简单 地 了 解 一 下 JavaScript 中 二 进 制 计数 。 
JavaScript 中 只 有 一 种 数值 类 型 : 原始 类 型 Number。 但 是 实际 上 ，JavaScript 中 存储 的 数值 有 
两 种 ,分 别 为 有 符号 数 和 无 符号 数 。 其 实 这 和 大 多 数 编程 语言 类 似 ,只 是 有 些 强 类 型 的 语言 
会 将 数值 类 型 再 进行 细 化 ， 比 如 8 位 整 型 、32 位 整 型 、64 位 整 型 、32 位 浮 点 型 或 64 位 浮 点 型 。 
JavaScript 中 所 有 的 数值 默认 都 是 32 位 的 ( 当然, 这样 说 并 不 准确 , 具体 的 位 数 和 计算 机 环境 
有 关 , 目前 大 多 都 是 32 位 的 ) ,位 数 即 表示 一 个 数字 需要 多 少 个 二 进 制 位 , 我 们 暂 定 JavaScript 
中 所 有 的 数值 都 是 32 位 的 ， 那 么 8 这 个 十 进 制 数 在 内 存 中 存储 的 数据 如 下 : 
[wm | vw | [= [Tl [oo Tle- | 


上 面 每 一 个 方 格 表示 一 个 二 进 制 位 , 中 间 的 省 略 号 代表 省 略 中 间 的 0, 一 共 32 个 小 方 格 ， 
代表 32 个 数位 。 

JavaScript 中 所 有 的 数值 创建 时 默认 都 是 有 符号 的 ， 虽 然 存储 一 个 数值 需要 32 位 ， 我 们 
能 够 操作 的 实际 上 只 有 31 位 ， 最 后 一 位 作为 符号 位 ， 符 号 位 为 0 表示 这 个 数值 是 正 数 ， 符 号 
位 为 1 表示 这 个 数值 是 负数 。 对 于 正 数 ， 存 储 在 内 存 中 的 二 进 制 数据 很 好 理解 ， 将 此 正 数 的 
二 进 制 形 式 放 入 内 存 ， 其 余 位 补 零 即 可 。 但 是 对 于 负数 ， 其 在 内 存 中 是 以 二 进 制 补 码 方式 存 
储 的 ， 计 算 补 码 的 步骤 如 下 : 


(1 ) 确定 该 数 的 绝对 值 的 二 进 制 形式 。 
(2 ) 对 此 二 进 制 码 求 反 码 (0 和 1 互相 交替 ) 。 
(3 ) 在 反 码 的 基础 上 加 1。 


根据 上 面 的 规则 ， 以 十 进 制 数 -8 为 例 , 其 绝对 值 的 二 进 制 形式 为 0...01000， 对 其 求 反 码 
为 1...10111， 在 其 基础 上 再 加 1 得 到 1...11000， 即 十 进 制 数 -8 实际 存在 内 存 中 的 数据 如 下 : 


相对 于 有 符号 数 而 言 ， 无 符号 数 中 并 没有 负数 ， 所 有 的 数值 都 是 正 数 ， 在 这 种 情况 下 ， 
正 负 位 就 失去 了 作用 ， 因 此 对 于 无 符号 数 来 说 ， 其 32 个 二 进 制 位 都 用 来 表示 数字 。 

额外 说 一 点 , 计算 机 中 为 什么 要 采用 补 码 的 方式 来 存储 数据 呢 ? 对 于 有 符号 数 , 最 高 位 
表示 的 是 符号 ， 如 果 直 接 进 行 二 进 制 形式 的 存储 ， 难 免 会 出 现 这 样 一 种 情况 : 0 可 以 表示 为 
正 数 0 和 负数 0， 这 有 悖 现实 规律 。 因 此 ， 人 们 采用 补 码 的 方式 使 现实 的 数值 与 计算 机 内 存 中 
存储 的 二 进 制 数据 一 一 对 应 ， 正 数 的 补 码 是 其 本 身 ， 负 数 的 补 码 是 其 反 码 加 1。 经 过 这 样 的 
计算 后 , 无论 是 正 数 0 还 是 负数 0， 在 计算 机 内 存 中 存储 的 都 是 全 0 码 ， 做 到 了 统一 。 

理解 了 计算 机 中 的 二 进 制 计算 原理 , 我 们 再 来 看 位 运算 符 。 顾名思义 ,位 运算 就 是 在 二 
进 制 位 的 基础 上 进行 运算 , 其 直接 对 二 进 制 位 进行 操作 。 ECMAScript 中 支持 的 位 运算 有 7 种 ， 
分 别 为 按 位 非 运算 、 按 位 与 运算 、 按 位 或 运算 、 按 位 异 或 运算 、 按 位 左 移 运算 、 按 位 有 符号 
右 移 运算 和 按 位 无 符号 右 移 运算 。 
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按 位 非 运算 使 用 符号 “~” 来 定义 , 它 也 被 称 为 按 位 取 反 运算 , 即 原 二 进 制 位 是 1 的 变 为 
0， 原 二 进 制 位 是 0 的 变 为 1。 示 例 代 码 如 下 : 


varv3 = ~8; 

console.log(v3); /1/-9 

对 8 进行 按 位 取 反 运算 后 ， 结 果 将 为 - 9， 如果 将 十 进 制 换 成 二 进 制 表示 ， 这 个 过 程 就 很 
好 理解 ， 首 先 8 的 二 进 制 形式 如 下 : 








按 位 取 反 后 如 下 : 


本 [ .1 [T°。 1:[T: Tr| 


前 面 说 过 ， 负 数 存储 的 实际 上 是 补 码 ， 那 么 通过 逆 运 算 ， 先 对 补 码 减 1， 如 下 : 


再 对 补 码 减 1 后 得 到 的 反 码 取 反 ， 如 下 : 


nl | wo | | eol | 

上 面 的 原 码 就 是 我 们 最 终结 果 的 绝对 值 形式 , 将 其 转换 成 十 进 制 并 且 加 上 负 号 , 就 得 到 
了 -9。 

在 编程 中 , 你 并 不 需要 对 每 一 次 按 位 取 反 操作 都 进行 如 上 推演 , 上 面 介绍 的 过 程 只 是 原 
理 ,理解 了 原理 后 ,我 们 可 以 通过 技巧 记忆 的 方式 来 快速 得 到 想 要 的 答案 ， 即 对 数值 的 按 位 
取 反 操作 实际 上 就 是 将 此 数值 求 负 再 减 1。 

按 位 与 运算 使 用 “&” 符号 定义 ,是 一 个 二 元 运算 符 ， 其 进行 运算 的 两 个 操作 数 的 对 应 
二 进 制 位 分 别 进行 与 运算 后 将 结果 返回 ， 即 如 果 进 行 运算 的 相应 位 都 为 1， 最 终结 果 数 值 的 
此 二 进 制 位 为 1， 否 则 为 0。 示 例 代码 如 下 : 





| 














var v4 = 1&9; 

console log(v4); 

分 解 上 述 代 码 的 计算 过 程 如 下 。 

1 的 二 进 制 码 : 

0 | | Se [| oo | lo lw 1 
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进行 按 位 与 运算 后 : 








最 终结 果 为 1。 

按 位 或 运算 使 用 “|” 符 号 定义 ， 是 一 个 二 元 运算 符 ， 其 进行 运算 的 两 个 操作 数 的 对 应 
二 进 制 位 分 别 进行 或 运算 后 将 结果 返回 ， 即 如 果 进 行 运算 的 相应 位 都 为 0%， 最 终结 果 的 此 二 
进 制 位 为 90， 否则 为 1。 示 例 代码 如 下 : 


Var v5 = 8|3; 

console.log(v5); /11 

分 解 上 述 代码 的 计算 过 程 如 下 。 
8 的 二 进 制 码 : 


Lo ooTo To To To 


3 的 二 进 制 码 : 


er EE sl El 
进行 按 位 或 运算 后 : 
mm a sd | | 
最 终结 果 为 11。 
按 位 异 或 运算 使 用 符号 “^” 定 义 ， 是 一 个 二 元 运算 符 ， 其 进行 运算 的 两 个 操作 数 对 应 
二 进 制 位 分 别 进行 异 或 运算 后 将 结果 返回 , 即 如 果 进 行 运算 的 相应 位 不 同 ,最 终结 果 数 值 的 
此 二 进 制 位 为 1， 否 则 为 0。 示 例 代码 如 下 : 


varv6=8^11; 








console.log(v6); /3 
分 解 上 述 代 码 的 计算 过 程 如 下 。 

8 的 二 进 制 码 : 

| Wi [| vl | ew [wl] 
11 的 二 进 制 码 : 
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最 终结 果 为 3。 

按 位 左 移 运算 使 用 符号 “<<” 定 义 ， 其 作用 是 将 二 进 制 数据 向 左 移动 指定 的 位 数 ， 右 
侧 空 出 来 的 位 将 进行 补 零 操作 。 需 要 注意 , 按 位 左 移 操作 并 不 会 影响 符号 位 ， 移 动 过 程 并 不 
包括 符号 位 ， 示 例 代 码 如 下 : 


var v7 = -2<<2; 
console.log(v7); //-8 


分 解 上 述 代 码 的 计算 过 程 如 下 。 
-2 的 二 进 制 码 ( 补 码 ) : 








进行 左 移 两 位 的 运算 后 : 


对 补 码 求 原 码 : 


[0 | | 


最 终结 果 为 -8。 

与 按 位 左 移 运 算 相 对 应 的 还 有 按 位 右 移 运 算 。 需要 注意 , 按 位 右 移 运算 有 两 种 : 有 符号 
按 位 右 移 运算 与 无 符号 按 位 右 移 运算 。 其 中 , 有 符号 按 位 右 移 运算 与 按 位 左 移 运算 互 为 逆 运 
算 , 使 用 “>>” 符 号 定义 ， 示 例如 下 : 

Var v8 = -8>>2; 

console.log(v8); //-2 

无 符号 按 位 右 移 运算 和 有 符号 按 位 右 移 运 算 最 大 的 不 同 在 于 : 无 符号 按 位 右 移 运算 时 ， 
并 不 保留 符号 位 ， 会 将 符号 位 一 起 进行 移动 ， 其 使 用 “>>>” 符 号 定义 。 正 数 的 符号 位 为 0， 
因此 对 正 数 并 没有 影响 ， 负 数 就 不 同 了 ， 示 例如 下 : 


var v9 = 8>>>2; 

console.log(v9); /2 

var v10= -8>>>2; 

console.log(v10); //1073741822 


具体 过 程 这 里 不 再 重复 ， 你 可 以 根据 前 面 的 示例 自行 推导 一 下 。 
因此 ， 在 使 用 无 符号 右 移 运算 时 要 极其 小 心 。 
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2-17 自 增 与 自 减 运算 符 


C 语 言 中 定义 了 自 增 与 自 减 两 种 运算 符 ， 它 们 是 很 多 初学 者 的 路 上 梦 。 你 或 许 狂 到了， 
ECMAScript 中 也 定义 了 这 两 种 运算 符 ， 并 且 和 C 语 言 中 定义 的 用 法 基本 一 致 。 

自 增 运算 符 使 用 符号 “++” 定 义 ， 自 减 运 算 符 使 用 符号 “--” 定 义 。 简 单 理 解 ， 自 增 运 
算 符 是 在 操作 数 本 身 的 基础 上 进行 加 1 运算 ， 自 减 运算 符 是 在 操作 数 本 身 的 基础 上 进行 减 1 
运算 ， 示 例 代码 如 下 : 

// 自 增 与 自 减 运算 符 

vara= 10; 

varb= 10; 
/进行 自 增 与 自 减 运算 
att; 
b--; 
console.log(a); /将 打印 11 
console.log(b); // 将 打印 9 


需要 注意 , 自 增 和 自 减 运算 符 可 以 放 在 操作 数 后 面 ,也 可 以 放 在 操作 数 前 面 。 如 果 将 运 
算 符 放 在 操作 数 后 面 ， 通 常 称 其 为 “后 置 自 增 / 减 运 算 符 ”; 如 果 将 运算 符 放 在 操作 数 前 面 ， 
通常 称 其 为 “前 置 自 增 / 减 运 算 符 ”。“ 前 置 ”与 “后 置 ” 虽 然 只 是 一 字 之 差 ， 其 运算 过 程 
与 结果 却 差 别 很 大 。 


先 来 看 下 面 这 个 例子 : 

// 自 增 / 减 运算 符 的 前 置 与 后 置 

varc= 10; 

var d= 10; 

console.log(c++); /将 打印 10 
console.log(++d); /将 打印 11 
console.log(c); /将 打印 11 
console.log(d); /将 打印 11 


单独 打印 变量 c 和 变量 d 的 结果 都 将 是 11， 说 明 无 论 是 前 置 自 增 运 算 还 是 后 置 自 增 运 算 ， 
都 是 在 原 操作 数 的 基础 上 进行 加 1 运算 。 然 而 如 果 对 “c++” 和 “++d” 这 两 个 表达 式 的 返回 
值 进行 打印 ,可 以 发 现 前 置 自 增 运 算 返 回 的 是 运算 完成 后 的 值 , 而 后 置 自 增 运算 返回 的 是 运 
算 前 的 值 。 同 样 的 规则 也 适用 于 自 减 运算 符 ， 示 例 代码 如 下 : 
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vare= 10; 

varf= 10; 

console.log(e--); // 将 打印 10 
console.log(--f); // 将 打印 9 
console.log(e); // 将 打印 9 
console.log(f); // 将 打印 9 


2-18 条 件 运 算 符 


在 开发 中 , 条 件 语句 的 编写 必 不 可 少 , 然而 最 简单 的 条 件 结构 也 需要 至 少 3 行 功能 代码 ， 
示例 如 下 : 


/条 件 结构 
Var res; 
if(true){ 
res= 10; 
}else{ 
res = 0; 
} 
console.log(res); // 将 打印 10 


JavaScript 中 提供 了 条 件 运 算 符 “?:” 来 简化 表达 的 条 件 结构 。 上 面 的 示例 可 以 简化 成 如 
下 代码 : 
/条 件 表达 式 


var res = true?10:0; 
console.log(res); // 将 打印 10 


条 件 运算 符 组 成 的 表达 式 结构 为 “ 风 辑 值 ? 表 达 式 1: 表 达 式 2”， 当 问号 前 面 的 迪 辑 值 为 
true 时 ， 运 算 结 果 为 表达 式 1 的 值 ， 当 问号 前 面 的 逻辑 值 为 false 时 ， 运 算 结果 为 表达 式 2 的 值 。 
2-19 ”逗号 运算 符 与 delete 运算 符 


ECMAScript 中 还 定义 了 一 种 逗号 运算 符 , 其 作用 是 将 多 个 表达 式 放 入 一 行 语句 中 执行 ， 
示例 如 下 : 
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/ 喜 号 表达 式 
varrl = 1+3,r2=1*3; 
console.log(rl),console.log(r2): /将 打印 43 


逗号 运算 符 在 进行 多 个 变量 的 声明 时 ， 十 分 方便 。 
JavaScript 中 还 提供 了 一 个 十 分 特殊 的 运算 符 “delete”，“delete” 运 算 符 用 于 将 对 象 中 
的 某 个 属性 删除 ， 示 例如 下 : 


varobj={ 
name:" 到 少 "， 
age:25 

上 


console.log(obj.name); // 将 打印 巫 少 
delete obj.name; 
console.log(obj.name); /将 打印 undefined 


关于 对 象 的 更 多 内 容 ， 后 面 章节 会 详细 介绍 ， 这 里 你 只 需要 了 解 “delete” 运 算 符 的 作 
用 即 可 。 


2-20 ”关于 运算 符 的 优先 级 与 结合 性 


在 任何 编程 语言 中 , 运算 符 的 优先 级 与 结合 性 都 是 一 个 老生 常 谈 的 话题 。 小 学 数学 老师 
都 一 遍 遍 地 告诉 过 我 们 “ 先 乘除 ， 后 加 减 ”的 法 则 。 在 ECMAScript 语 法 中 ， 也 遵守 类 似 的 
法 则 。 例 如 如 下 表达 式 计算 的 值 是 22 而 不 是 28: 

varres= 2+5*4; 

console.log(res); // 结 果 为 22 

所 谓 运 算 符 的 优先 级 , 是 指 不 同 运 算 符 在 同一 个 表达 式 中 执行 运算 的 先后 顺序 。 优先 级 
高 的 运算 符 将 优先 被 执行 运算 , 例如 上 面 示例 代码 中 的 “*” 运 算 符 的 优先 级 要 高 于 “+” 运 
算 符 ， 因 此 先进 行 乘法 运算 ， 再 进行 加 法 运算 。 

除了 “优先 级 ”的 概念 外 , 运算 符 还 有 “结合 性 ”概念 。 对 于 优先 级 相同 的 运算 符 , “ 结 
合 性 ”决定 了 其 表达 式 中 运算 的 执行 顺序 ,结合 性 分 为 左 结合 性 和 右 结合 性 ， 左 结合 性 的 运 
算 符 将 从 左 向 右 依次 执行 ， 右 结合 性 的 运算 符 将 从 右 向 左 依次 执行 ， 示 例如 下 : 

// 结 合 性 

/ 左 结合 

vara= 1+2+3; // 结 果 为 6， 相当 于 (1+2)+3 
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// 右 结合 性 
varb=c=5; 


1 相当 于 c=5; b=c; 


常用 运算 符 的 优先 级 与 结合 性 如 表 2-6 所 示 。 


表 2-6 ”运算 符 的 优先 级 与 结合 













































































运算 符 优先 级 结合 性 
小 括号 : 0 19 3 
后 置 递增 : ++ 16 

后 置 递减 : -- 16 
逻辑 非 : ! 15 右 
按 位 非 : ~ 15 右 
正 号 运算 符 : + 15 右 
负 号 运算 符 : - 15 右 
前 置 递 增 : ++ 15 右 
前 置 递减 : -- 15 右 
Delete 15 右 
乘法 : * 14 在 
除法 ; / 左 
取 模 : % 
加 法 : + 13 左 
减法 : - 13 左 
按 位 左 移 : << 12 左 
按 位 右 移 :>> 12 左 
按 位 无 符号 右 移 ，>>> 12 左 
小 于 : < 11 左 
小 于 等 于 : <= 11 左 
大 于 > 11 左 
大 于 等 于 : >= 11 左 
等 于 : 一 10 左 
非 等 ， (= 10 左 
全 等 : 一 = 10 左 
非 全 等 : ! 一 10 左 
按 位 与 : & 9 左 
按 位 异 或 : ^ 8 左 
按 位 或 : | 左 
逻辑 与 : && 6 左 
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( 续 表 ) 

















来 看 一 个 小 例子 ， 你 能 猜 出 下 面 代码 的 计算 结果 吗 ? 
/例子 


Var i=3; 

varj=3; 

Var n=3; 

Vara=it+++it+ +it+; /3+4+5 

varb = +Hj 十 二 Hj 十 二 HH; /4+5+6 

Var c = n+ 十 十 十 Hn 十 n++; /3+5+5 

0C0050lelosC HH "HH a tat Hb "+o /1/6,6,6,12,15,13 


无 论 你 对 运算 符 的 优先 级 与 结合 性 记忆 如 何 , 给 你 一 个 建议 : 如 果 有 控制 运算 顺序 的 必 
要 ,请 强制 使 用 小 括号 , 一目了然 ， 省 时 省 心 。 


2-21 ” 隐 式 类 型 转换 


不 夸张 地 说 ， 类 型 转换 在 ECMAScript 中 无 时 无 刻 不 在 进行 。 有些 类 型 转换 浅显 易 见 ， 
例如 使 用 内 置 函数 来 进行 类 型 转换 ， 代 码 如 下 : 


varnl = 5; 

var sl = String(n1); 

/数值 转换 成 字符 串 

console.log(s1,typeof s1); //5 string 


这 种 使 用 函数 手动 进行 类 型 转换 的 方式 常常 被 称 为 显 式 类 型 转换 , 显 式 转换 一 般 不 会 为 
代码 带 来 风险 。 作 为 开发 者 ， 我 们 可 以 一 眼看 出 转换 前 后 的 类 型 。 在 ECMAScript 中 ， 最 令 
开发 者 提心吊胆 的 是 隐 式 转换 ， 稍 不 留神 就 会 掉 入 其 中 的 陷阱 。 

当 你 将 数字 与 字符 串 进 行 相 加 操作 时 , 数字 会 被 隐 式 转换 成 字符 串 再 进行 加 操作 , 这 在 
前 边 的 案例 中 也 有 介绍 。 其 实在 ECMAScript 中 ， 对 象 之 间 的 加 操作 也 会 被 隐 式 转换 成 字符 
捉 ， 例如: 
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var objl = {name:"Jaki"}; 

var obj2 = {age:25}; 

varvl = objl+obj2; 

console.log(v1); //[object Object][object Object] 

加 法 运算 符 虽然 会 经 常 产 生 隐 式 转换 , 但 是 其 并 不 是 真正 的 雷 区 。 真正 的 雷 区 是 关系 运 
算 符 。 前 面 介绍 过 ， 在 进行 相等 比较 时 ，ECMAScript 中 提供 了 两 种 运算 符 ， 一 种 是 相等 运 
算 符 “ 一 ”， 另 一 种 是 全 等 运算 符 “ 一 -=”。 前 面 我 们 说 全 等 运算 符 要 求 除了 值 相等 外 ， 类 
型 也 要 相等 。 其 实 这 是 一 种 不 正确 的 说 法 ( 只 是 因为 便于 理解 记忆 并 且 比 较 流行 , 所 以 我 们 
姑且 这 么 说 ) , 相等 与 全 等 运算 符 的 真正 区 别 在 于 相等 运算 符 会 进行 隐 式 类 型 转换 ， 而 全 等 
运算 符 不 会 。 第 一 种 说 法 会 让 你 误 认 为 全 等 运算 符 做 了 更 多 工作 : 既 比 较 值 又 比较 类 型 。 实 
际 上 恰好 相反 ,相等 运算 符 做 的 工作 更 多 : 比较 前 先进 行 隐 式 类 型 转换 。 我 们 来 看 一 个 简单 
的 命题 : 

有 变量 a，a 一 !a 一 定 不 成 立 。 

这 个 命题 乍 看 上 去 必然 为 真 ， 那 么 我 们 通过 代码 来 测试 一 下 : 

Var a="0"; 

var res= (a 一 !a); 

console.log(res); /ltrue 

上 面 的 打印 结果 为 true ， 你 一 定 目 瞎 口 打 ， 一 个 值 的 取 反 竞 然 和 它 本 身 是 相等 的 。 如 果 
你 了 解 隐 式 类 型 转换 的 过 程 ， 这 个 神奇 的 结果 其 实 一 点 也 不 神奇 。 首 先 ， 对 字符 串 "0" 进 行 
迪 辑 非 运 算 时 ,会 被 转换 成 多 辑 值 false， 进 行 等 于 比较 运算 时 ， 风 辑 值 false 会 被 隐 式 类 型 转 
换 为 数值 0， 而 字符 串 "0" 也 会 被 隐 式 转换 成 数值 0， 因 此 比较 的 结果 为 tue。 相 等 运算 符 在 进 
行 不 同类 型 间 的 比较 时 , 大 部 分 情况 都 会 朝 数 值 的 方向 进行 隐 式 类 型 转换 , 在 使 用 时 一 定 要 
格外 注意 。 

还 有 一 些 经 常会 令 开 发 者 疑惑 的 情况 ， 请 看 下 面 的 命题 : 

(1) 有 变量 a 和 b， 且 都 不 等 于 NaN， 则 a>b、a<b 和 a 一 b 中 一 定 有 一 个 是 成 立 的 。 
(2 ) 有 变量 a 和 b， 且 都 不 等 于 NaN， 则 a>=b 和 a<=b 中 一 定 有 一 个 是 不 成 立 的 。 


这 两 个 命题 看 上 去 都 是 无 懈 可 击 的 ， 看 过 如 下 代码 ， 你 就 会 改变 想法 了 : 


vara= {}; 
varb= £0; 
console.log(a>b); //false 
console.log(a<b); //false 
console.log(a==b); //false 
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console.log(a>=b); /lltrue 
console.log(a<=b); //true 


奇怪 吧 ， 上 面 的 代码 前 3 个 全 部 打印 了 false， 当 对 “对 象 ”进行 大 于 或 小 于 比较 时 ， 会 
将 其 隐 式 转换 为 字符 串 ， 对 象 转 换 成 字符 串 后 都 为 [object Objectl， 因 此 前 两 个 log 语 句 都 打 
印 了 false。 而 针对 a 一 b 的 比较 ， 这 里 并 没有 进行 隐 式 类 型 转换 ， 回 忆 一 下 前 面 讲解 过 的 值 类 
型 与 引用 类 型 就 能 蔬 然 开朗 ， 对 于 对 象 只 有 其 引用 完全 相同 时 ， 才 算 相等 。 

第 2 个 命题 也 是 假 的 ,后 两 个 打印 了 true, 击 破 这 个 命题 的 原因 在 于 ECMAScript 中 对 “>=” 
和 “<=” 两 种 运算 符 的 运算 会 自动 被 转换 成 “<” 和 “>”。 

陷 式 类 型 转换 是 ECMAScript 中 的 一 把 双 刃 剑 ， 其 给 开发 者 编写 代码 带 来 便利 的 同时 ， 
也 存在 很 多 隐患 ， 在 编写 代码 时 一 定 要 多 多 注意 。 


2-22 ”编程 练习 


练习 1: 预测 下 面 log 语 句 输出 的 值 。 

vara=3; 

varb = {age:26}; 

Varc=a; 

c=4; 

vard=b; 

d.age = 25; 

console.log(a,c,b.age,d.age); 

解析 : 将 会 输出 : 3 425 25。 本 练习 主要 考察 对 JavaScript 中 值 类 型 和 引用 类 型 的 理解 。 
值 类 型 数据 直接 存在 变量 所 在 的 内 存 中 , 在 赋值 时 会 直接 复制 原始 值 ， 引 用 类 型 变量 中 存放 
的 是 数据 所 在 的 地 址 ， 赋 值 时 赋 的 是 地 址 ， 因 此 在 修改 时 会 影响 所 有 的 变量 。 

练习 2: 编写 一 个 函数 ， 对 传 入 的 参数 进行 类 型 检查 ， 如 果 为 undefined 或 者 null， 返 回 
布尔 值 假 ， 否 则 返回 真 。 

解析 : 

function check(param){ 

if (param == undefined || param =— null) { 
return false; 


} 


return true; 


55 


现代 JavaScript 编程 : 经 典范 例 与 实践 技巧 


练习 3: 分 别 用 八进制 和 十 六 进 制 和 科学 计数 法 来 表示 十 进 制 数 99。 
解析 : 

科学 计数 法 : 9.9el。 

八进制 : 0143 或 00143。 

十 六 进 制 : 0x63。 


练习 4: 编写 函数 ， 实 现 如 下 功能 。 传 入 两 个 字符 串 参 数 ， 以 换行 符 将 两 个 字符 串 进 行 
拼接 ， 之 后 返回 。 

解析 : 

function func(s1,s2){ 


return sl+\n'+s2; 


1 
console.log(func(" 你 好 ","JavaScript")); 


练习 5: 用 两 种 方式 创建 教师 对 象 ， 为 其 添加 一 个 hame 属 性 ， 并 用 两 种 方式 来 进行 属性 
的 访问 。 
解析 : 


var teacherl = { 

name:'Jaki' 
var teacher2 = new Object(); 
teacher2.name = 'Lucy'; 


console.log(teacherl .name,teacher2['name']); //Jaki Lucy 

练习 6: 创建 一 个 函数 ， 其 功能 是 生成 1 ~ 100 间 的 一 个 随机 数 。 
解析 : 

function rand(O){ 


return Math.floor(Math.random()*100); 
1 


console.log(rand()); 


floor 是 JavaScript 中 的 一 个 数学 函数 ， 用 来 进行 浮 点 数 的 向 下 取 整 ，random 函 数 用 来 生 
成 一 个 0 到 1 之 间 的 随机 浮 点 数 。 


练习 7: 思考 一 下 ， 如 何 编写 一 个 函数 ， 不 使 用 乘法 运算 符 来 实现 乘 以 2 的 n 次 方 运算 。 
解析 : 
function func(param,c){ 


56 


第 2 章 “ECMAScript 的 语法 世界 


return param<<(c); 
} 
console.log(func(3,2)); /3*2^2 = 12 


由 于 二 进 制 数 的 运算 特点 ， 因 此 使 用 左 移 位 运算 可 以 快速 实现 乘 以 2 的 n 次 方 运算 。 


练习 8: 编写 一 个 函数 ， 实 现 如 下 由 辑 。 若 传 入 的 参数 为 布尔 值 ， 则 进行 取 反 后 返回 ; 
若 传 入 的 是 字符 串 值 ， 则 在 前 面 拼接 “hello，string: ”后 返回 ; 如 果 是 大 于 100 的 数值 ， 就 
返回 100, 不 大 于 100 的 数值 则 返回 1; 如 果 是 对 象 ， 就 返回 字符 串 “Object”; 其 他 情况 均 返 


回 数值 0。 
解析 : 


function func(param){ 

if (typeof param === 'boolean') { 
return !param; 

} 

if (typeof param === 'string') { 
return "hello,string:"+param; 

} 

if (typeof param === ‘number') { 
if (param>100) { 


return 100; 
jelsef 
return 1; 
b 
1 
if (typeof param === 'object) { 
return "Object"; 
b 
return 0; 
} 
练习 9: 编写 函数 ,使 用 条 件 运算 符 实现 如 下 迪 辑 。 输 入 的 参数 能 整除 3， 就 返回 true， 
否则 返回 false。 
解析 : 
function func(param)!{ 
return param%3==0?true:false; 
} 
console.log(func(1)); //false 
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练习 10: 你 能 看 出 下 面 log 语 句 的 输出 吗 ? 


console.log(1=—1"); 
); 
console.log(NaN=—Infinity); 
console.log(Infinity 一 Infinity+1); 
console.log(NaN =— NaN); 
console.log({}=—=f}); 


解析 : 


console.log(1 一 '1); //true 
| //false 


console.log(1= 一 '1 








console.log(1= 一 





console.log(NaN==—=Infinity); //false 
console.log(Infinity == Infinity+1); /ltrue 
console.log(NaN =— NaN); //false 
console.log({}==f}); /false 


“一 ”运算 符 和 “= 一 ”运算 符 的 最 大 区 别 是 “一 ”会 进行 隐 式 类 型 转换 。 


ECMAScript 流程 控制 与 函数 


程序 的 邮 辑 都 是 由 流程 来 实现 的 ， 任 何 一 种 编程 语言 都 要 有 控制 程序 流程 的 相关 功能 。 
说 到 程序 流程 ， 最 重要 的 两 种 结构 就 是 分 支 结构 与 循环 结构 。 分支 结构 使 程序 有 了 灵活 的 选 
择 能 力 ， 循 环 结构 则 使 程序 有 了 重复 大 量 工作 的 能 力 。 当 然 ， 分支、 异常 、 异 步 等 结构 也 是 
ECMAScript 中 重要 的 流程 控制 方式 。 


3-1 if-else 分 支 结 构 


if-else 语 句 是 JavaScript 中 最 常用 的 条 件 语句 。 使 用 if 语 句 ， 开 发 者 可 以 根据 不 同 的 条 件 
做 不 同 的 逻辑 处 理 。 最 简单 的 if 语 句 示例 如 下 : 


/结构 1 
var condition = 10>5; 
if (condition) { 
console.log(" 分 支 一 "); // 将 执行 
} 
console.log(" 结 束 "); 


现代 JavaScript 编程 : 经 典范 例 与 实践 技巧 


让 关键 字 后 面 的 小 括号 中 需要 写 入 一 个 要 进行 判断 的 条 件 ， 此 表达 式 不 一 定 是 严格 的 
Boolean 类 型 ，ECMAScript 会 自动 对 其 进行 Boolean 类 型 转换 。 需要 注意 , 为 了 减少 歧义 与 出 
错 率 , 建议 在 if 条 件 中 编写 严格 返回 Boolean 值 的 表达 式 。 如 果 if 条 件 最 终 为 true, 程序 就 会 执 
行 大 括号 中 的 代码 块 ， 如 果 if 条 件 最 终 为 false， 程 序 就 会 跳 过 大 括号 中 的 代码 块 向 后 执行 。 

让 else 语 句 还 有 额外 两 种 结构 ， 可 以 方便 地 进行 多 分 支 结构 的 处 理 ， 示 例如 下 : 

1 让 结构 2 

if (condition) { 

console.log(" 分 支 一 "); 
jelsef 
console.log(" 分 支 二 "); 

} 

console.log(" 结 束 "); 


// 许 结构 3 

if (condition) { 
console.log(" 分 支 一 "); 

}else if(condition2){ 
console.log(" 分 支 二 "); 

}else if(condition3){ 
console.log(" 分 支 三 "); 

}else{ 
console.log(" 分 支 四 "); 

} 

console.log(" 结 束 "); 


结构 2 与 结构 1 的 区 别 在 于 : 如 果 if 条 件 为 false， 结 构 1 就 会 跳 过 if 结构 ， 而 结构 2 则 会 执 
行 else 对 应 的 大 括号 中 的 代码 块 。 结 构 3 是 一 种 多 条 件 分 支 结构 ， 会 依次 判断 ii 条 件 是 否 为 
true， 遇 到 一 个 if 条 件 为 true 后 ， 则 将 执行 其 对 应 的 代码 块 ， 并 且 其 后 的 if 结 构 都 会 被 跳 过 。 


3-2 ”switch-case 分 支 结构 


在 学 习 switch-case 结 构 之 前 ， 你 可 以 先 思考 一 个 简单 的 场景 : 学 生 综 合成 绩 满分 5 分 ， 
最 低 1 分 。 分 数 从 高 到 低 依次 代表 卓越 、 优 秀 、 良 好 、 及 格 和 不 及 格 。 试 编写 ECMAScript 程 
序 来 自动 输出 分 数 对 应 的 档次 。 

使 用 if-else 结 构 可 以 编写 出 如 下 代码 : 
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var score = 4; 
if (score==1) { 
console.log(" 不 及 格 "); 
jelse if(score==2){ 
console.log(" 及 格 "); 
jelse if(score==3){ 
console.log(" 良 好 "); 
jelse if(score==4){ 
console.log(" 优 秀 "); 
jelse if(score==5){ 
console.log(" 卓 越 "); 
}else{ 
console.log(" 无 效 的 分 数 "); 
} 


上 面 的 示例 代码 可 以 完成 题目 的 要 求 ， 但 是 大 量 if-else 判 断 使 得 代码 变 得 十 分 宛 余 ， 看 
上 去 并 不 简洁 ， 使 用 switch-case 结 构 可 以 很 好 地 解决 这 一 问题 。 

switch-case 也 是 ECMAScript 中 的 一 种 多 分 支 结 构 ， 使 用 switch-case 结 构 重 新 改写 上 面 的 
代码 如 下 : 


Switch (Score) { 
case 1:{ 
console.log(" 不 及 格 "); 
} 
break:; 
case 2:{ 
console.log(" 及 格 "); 
} 
break; 
case 3:{ 
console.log(" 良 好 "); 
} 
break; 
case 4:{ 
console.log(" 优 秀 "); 
} 
break:; 
case 5:{ 
console.log(" 卓 越 "); 
} 
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break; 
default:{ 
console.log(" 无 效 的 分 数 "); 
} 
} 


switch 关 键 字 后 面 需要 指定 一 个 表达 式 ，case 子 句 对 应 的 值 如 果 和 此 表达 式 的 值 相等 ， 
就 会 执行 此 case 对 应 的 代码 块 。 需 要 注意 ，break 语 句 用 于 跳出 switch-case 结 构 ， 即 一 旦 某 个 
case 匹 配 成 功 ， 则 不 再 运行 后 续 罗 辑 代码 。 这 点 在 开发 中 要 根据 实际 情况 选择 是 否 使 用 break 
跳出 ，default 块 则 是 当 所 有 case 都 匹配 失败 后 执行 的 代码 。 

在 许多 编程 语言 中 ，switch-case 结 构 都 有 一 个 特殊 的 要 求 ， 进 行 匹配 的 值 必须 为 整 型 数 
据 。JavaScript 则 不 同 ，switch-case 结 构 进行 匹配 的 值 可 以 是 字符 串 ， 甚 至 是 其 他 变量 。 


3-3 ”while 循环 结构 


循环 结构 又 称 迭 代 结 构 ， 用 来 多 次 重复 地 执行 某 一 块 罗 辑 代码 。 我 们 在 计算 数学 题 时 ， 
思路 是 向 着 简单 化 与 公式 化 的 ， 因 为 人 的 大 脑 有 极限 ， 无 法 也 不 可 能 进行 超 量 的 计算 工作 。 
但 是 计算 机 解决 问题 的 思路 与 之 刚好 相反 , 计算 机 的 运算 速度 非常 快 , 一 般 情况 下 根本 无 须 
考虑 运算 性 能 的 问题 。 因此 , 作为 开发 者 , 在 编写 代码 时 更 应 该 考虑 代码 的 简洁 性 与 易 读 性 。 

如 果 有 人 问 你 从 1 依次 递增 100 的 连 加 结果 是 多 少 ,我 想 你 可 能 首先 会 想到 等 差 数 列 的 求 
和 公式 : 首 项 加 末 项 的 和 乘 以 项 数 除 以 二 。 在 编程 中 要 解决 这 个 问题 ， 使 用 循环 结构 更 加 
简单 。 

下 面 的 示例 代码 分 别 演示 使 用 数学 公式 的 方式 和 使 用 循环 结构 的 方式 对 等 差 数 列 进行 
求 和 运算 : 

/数学 公式 进行 等 差 数列 的 计算 1..100 

var res = (1+100)*100/2; 

console.log(res); /5050 

/使 用 循环 结构 来 进行 计算 


var i=]; 














var res2 = 0; 
while(i<=100){ 
res2+=i; 
itt+; 
} 
console.log(res2); /5050 
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上 面 的 示例 代码 中 使 用 到 的 while 结 构 是 ECMAScript 中 十 分 常用 的 一 种 循环 结构 ，while 
关键 字 后 面 需要 指定 一 个 循环 条 件 ， 当 此 条 件 成 立时 ， 会 执行 while 循 环 体 中 的 代码 ， 执 行 
完成 后 ,会 继续 判断 循环 条 件 是 否 成 立 ， 如 果 条 件 成 立 ， 就 会 再 次 执行 循环 体 , 直到 条 件 不 
成 立 为 止 。 

while 循 环 还 有 一 种 变 体 , 其 被 称 为 do-while 循 环 结构 , 与 while 循 环 的 区 别 在 于 , do-while 
结构 需要 先 执行 一 次 循环 体 ,之 后 进行 循环 条 件 的 判断 ， 如 果 条 件 成 立 , 就 会 再 次 执行 循环 
体 ， 直 到 条 件 不 成 立 为 止 。 上 面 的 求 和 运算 使 用 do-while 结 构 的 方式 改写 如 下 : 

//do-while 循环 

二 1; 

res3 = 0; 

dof 

res3+=i; 

it+; 
}while(i<=100); 
console.log(res3); /5050 


需要 注意 , 在 编程 中 ,无 限 循环 也 叫 作 死 循环 , 一般 情况 下 , 我 们 要 避免 编写 出 死 循 环 
的 代码 。 使 用 while 结 构 编写 最 简单 的 无 限 循 环 如 下 : 
while(true){ 


console.log("..."); 


} 
3-4 ”for 循环 结构 


for 循 环 结构 是 比 while 循 环 结构 更 加 常用 的 一 种 循环 结构 ， 在 许多 流行 编程 语言 中 也 是 
如 此 。for 循 环 的 基本 编写 格式 如 下 : 

for(init;exp;exc) {} 

其 中 ，init 语 句 对 循环 变量 进行 初始 化 ，exp 语 句 是 循环 的 条 件 ，exc 语 句 用 于 修改 循环 
变量 ， 示 例如 下 : 

//for 循环 

var res4 = 0; 

for (vari= 1;i<= 100; i+t+) { 

res4+=i; 
} 
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console.log(res4); /5050 


for 循 环 语句 的 格式 十 分 自由 ，init 语 句 、exp 语 句 甚至 exc 语 句 都 是 可 以 省 略 的 。 若 已 经 
存在 循环 变量 ， 则 init 语 句 可 以 省 略 ， 示 例如 下 : 

var res4 = 0; 

vari= 1; 

for (;i<= 100; it+) { 

res4+=i; 
1 
console.log(res4); /5050 


同样 ， 如 果 循 环 变量 不 需要 修改 ，exc 语 句 也 可 以 省 略 ， 示 例如 下 : 
/for 循环 
var res4 = 0; 
vari= 1; 
for(;i<= 100;) { 
res4+=i++; 


} 
console.log(res4); /5050 


需要 注意 ， 如 果 省 略 循环 条 件 ，for 循 环 就 会 无 限 循环 下 去 ， 除 非 遇 到 中 断 语句 。 用 for 
循环 结构 编写 最 简单 的 无 限 循环 如 下 : 


for(;;) 
3-5 关于 for-in 与 for-of 结构 


ECMAScript 中 还 提供 了 两 种 十 分 特殊 的 迭代 结构 : for-in 与 for-of。 这 两 种 结构 都 用 于 对 
象 属性 的 枚 举 。 到 目前 为 止 , 你 可 能 对 对 象 的 理解 还 不 够 深入 , 我 们 暂且 不 谈 对 象 的 更 多 内 
容 , 你 只 需要 知道 对 象 中 可 以 封装 属性 , 而 forin 和 forof 结 构 可 以 用 来 遍历 对 象 的 属性 信息 。 
for-in 用 来 志 历 对 象 中 属性 的 键 ， 例 如 : 


var teacher= { 
name:'jaki', 
age:24, 
Subject:JavaScript 
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/将 打印 name age subject 

for (let key in teacher) { 
console.log(key); 

} 


for-of 结 构 则 更 加 特殊 ， 其 是 ECMAScript 6 引入 的 新 特性 。 需 要 注意 ，for-of 并 不 能 作用 
于 对 象 类 型 ， 是 对 集合 的 一 种 遍历 ， 例 如 数组 、 集 合 、 字 符 串 等 。 示 例 代 码 如 下 : 


var array = ["jaki","lucy","mery","jie"] 

/将 打印 jaki lucy mery jie 

for (let value of array){ 
console.log(value); 

} 

// 将 打印 hello 

for (let value of "hello"){ 
console.log(value); 


} 


其 实 ,for-of 结 构 是 配合 ES6 中 的 迭代 器 进行 使 用 的 , 你 也 可 以 让 teacher 对 象 实现 迭代 器 
方法 ， 示 例如 下 : 
var teacher = { 
_innerKeys:["name","age","subject"], 
_index:0, 
name:'jaki', 
age:24, 
Subject:JavaScript， 
[Symbol.iterator]: function () { 
return this; 
}, 
next:function(){ 
let obj = {value:this[this. innerKeys[this. index++]],done:this. index> 
this._innerKeys.length}; 
if (this._ index>this. innerKeys.length) { 
this._ index=0; 
b 
return obj; 
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/将 打印 jaki 24 javascript 
for(let value of teacher){ 
console.log(value); 


关于 迭代 器 的 更 多 内 容 ， 后 面 会 专门 进行 讲解 。 


3-6 ”break 中 断 语 名 


在 ECMAScript 中 , 中 断 语 句 有 两 种 ,分 别 为 break 语 名 与 continue 语 句 。 中 断 语句 与 标签 
语句 结合 使 用 可 以 更 加 灵活 地 控制 程序 的 执行 流程 。 

在 讲解 switch-case 结 构 时 , 我 们 已 经 使 用 过 break 语 句 ， 在 switch-case 结 构 中 ，break 语 句 
可 以 直接 跳出 当前 的 switch-case 模 块 。 同样 ， 在 循环 结构 中 ,也 可 以 使 用 break 语 句 来 提前 终 
止 循环 。 示 例 代 码 如 下 : 


//break 语句 
for(var i=0;1<5;it+){ 
console. log(i); /依次 输出 0、1、2、3 
if (i==3) { 
break; 
} 
} 


上 面 的 代码 中 ， 如 果 不 添加 break 语 句 ， 程 序 将 依次 输出 0、1、2、3、4。 添 加 了 break 
语句 后 ， 当 循环 变量 i 自 增 到 3 时 ， 程 序 将 跳出 循环 结构 ， 控 制 台 只 会 输出 9、1、2、3。 需 要 
注意 ，break 语 句 默 认 将 跳出 当前 所 在 的 最 内 层 循环 。 例 如 ， 下 面 的 代码 演示 在 多 层 循环 中 
使 用 break 语 句 : 


for(var =0;i<3;i++)f 
console.log("i="+iD; 
for(var j=03<3:j++){ 
if(i==0) { 
break; 
} 
console.log("j="+j); 


} 


console.log(" 一 一 一 ); 
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从 程序 的 打印 结果 可 以 看 出 ，break 语 句 跳 出 了 内 层 循环 ， 外 层 循环 依然 继续 执行 。 
对 于 多 层 嵌 套 的 循环 ， 如 果 需 要 灵活 控制 跳出 动作 ， 可 以 将 break 语 句 与 标签 语句 结合 
使 用 ， 示 例如 下 : 
label:for(var 二 0;i<3;i++)f{f 
console.log("i="+i); 
for(var j=0;j<33j++){ 
if (==0){ 
break label; 
1 


console.log("j="+]); 


} 


console.log("=—==="); 

Ae 

打印 结果 

i=0 

my 

从 打印 结果 可 以 看 出 ， 上 面 代码 中 的 break 语 句 直接 跳出 了 外 层 循环 。 标 签 语句 的 格式 
上 分 简单 ， 在 要 加 标签 的 语句 前 使 用 标签 名 加 冒号 的 形式 标注 即 可 ，break 关 键 字 后 面 可 以 
章 定 一 个 已 存在 的 标签 名 来 跳出 特定 的 循环 。 

需要 注意 , 从 原理 上 讲 ， 循 环 结构 是 可 以 无 限 谋 套 的 ,但 是 在 实际 开发 中 , 代码 的 整洁 
与 易 读 性 也 十 分 重要 ， 编 写 循环 结构 时 ， 应 尽量 保持 不 超过 3 层 嵌 套 。 中 断 语句 与 标签 语句 
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结合 使 用 时 ， 可 以 极 大 地 提高 程序 的 灵活 性 。 但 同时 也 增加 了 代码 的 调试 难度 ， 建 议 如 果 不 
是 必需 的 ， 尽 量 少 用 标签 语句 ， 如 果 一 定 要 用 ， 也 应 该 使 标签 的 命名 易于 理解 。 


3-7 ”continue 中 断 语 名 


continue 语 句 也 是 CMAScript 中 常用 的 中 断 语句 ， 其 和 break 语 句 有 着 很 大 区 别 。break 语 
句 是 跳出 当前 的 循环 结构 ， 而 continue 语 句 则 是 跳出 本 次 循环 。 示 例如 下 : 


//continue 语句 
for(var i=0;1<5;it+){ 

if (i==2) { 
continue; 


} 
console. log(i); /依次 输出 0，1，3,4 


} 
从 结果 可 以 看 出 ，continue 语 名 的 作用 是 使 程序 仅 跳 过 循环 变量 i 等 于 2 时 的 输出 代码 ， 
并 不 会 影响 循环 的 继续 执行 。 同 样 ， 对 于 多 层 循环 结构 ，continue 语 句 也 默认 只 跳出 内 层 特 
环 的 本 次 循环 ， 示 例如 下 : 
for(var i=0;i<3:i++){f 
console.log("i="+i); 
for(var j=03j<35j++){ 
if (==0) { 
continue; 


} 


console.log("j="+j); 


} 


console.log("=—=—="); 





9 

让 

打印 结果 
i=0 
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continue 语 名 也 可 以 和 标签 语句 结合 使 用 来 跳出 指定 循环 结构 的 本 次 循环 ， 示 例如 下 : 


label2:for(var i=0;i<3;i++){ 

console.log("i="+i); 
for(var j=0:j<3:j++){ 

让 (一 0) { 

continue label2; 

} 

console.log("j="+j); 
} 


console.log(" 








的 有 
} 

人 

打印 结果 

i=0 

El 

i=2 


需要 注意 , 上 面 的 代码 没有 打印 出 任何 的 值 。 原因 是 当 判断 j 等 于 0 时 , 直接 跳出 外 层 循 


环 的 本 次 循环 ， 因 此 内 层 循环 的 循环 变量 j 并 没有 执行 递增 操作 ，j 始 终 为 0。 


除了 break 和 continue 外 ，return 语 句 也 是 一 种 中 断 语句 ， 其 用 来 为 函数 提供 返回 值 。 


3-8 ”异常 抛 出 语句 throw 


无 论 你 是 一 个 经 验 多 么 丰富 的 开发 者 , 请 相信 我 , 在 运行 你 所 编写 的 程序 时 , 错误 一 定 


会 发 生 。 在 引擎 执行 ECMAScript 代 码 时 会 发 生 各 种 各 样 的 错误 ， 可 能 是 语法 错误 ， 可 能 是 
数据 处 理 错误 , 也 可 能 是 由 于 服务 端 数据 或 用 户 输入 的 数据 超出 开发 者 的 意料 而 发 生 的 逻辑 
错误 ， 等 等 。ECMAScript 内 置 了 许多 异常 对 象 ， 当 某 些 行为 触发 了 这 些 异常 时 ， 程 序 会 将 
异常 抛 出 并 且 中 断 在 抛 出 异常 的 地 方 。 开 发 者 可 以 使 用 try-catch 结 构 捕获 并 处 理 异 常 ， 从 而 
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保证 程序 的 顺畅 执行 ， 同 样 也 可 以 使 用 hrow 语 句 来 抛 出 一 个 异常 。 

暴露 错误 有 时 和 解决 错误 一 样 重 要 。 在 开发 中 ， 你 或 许 会 编写 大 量 有 参数 输入 的 函数 ， 
对 于 实际 输入 的 参数 , 有 时 候 并 不 是 你 可 以 决定 的 - 例如 , 我 们 要 编写 一 个 标准 的 除法 程序 ， 
代码 如 下 : 


function div(a,b){ 
return a/b; 
} 


var res = div(3,4); 
console.log(res); 


上 面 的 代码 乍 看 起 来 很 完美 , 实际 上 问题 却 很 多 , 对 于 一 个 标准 的 除法 运算 , 首先 其 除 
数 与 被 除数 应 该 都 是 标准 的 数值 类 型 , 不 可 以 是 字符 串 或 者 其 他 对 象 。 其 次 ,除数 与 被 除数 
都 不 可 以 是 无 穷 值 ， 被 除数 也 不 可 以 为 0。 上 面 这 两 条 规则 都 是 对 传 入 参数 的 限制 。 你 或 许 
会 想 ,我 们 并 没有 方法 控制 用 户 要 输入 的 东西 ， 没 错 , 但 是 你 可 以 在 用 户 输入 了 错误 数据 时 
让 函数 抛 出 异常 ， 使 程序 中 断 。 

JavaScript 中 使 用 throw 关 键 字 来 抛 出 异常 ， 修 改 上 面 的 代码 如 下 : 


function div(a,b){ 
if ((typeof a) != "number"||(typeof b) != "number"){ 
throw "must input a Number Value"; 


} 
if (lisFinite(a)l| !isFinite(b)) { 
throw "must input a Number is Finity"; 


} 
f(b===0) { 
throw "Dividend must not be 0"; 


7 
return a/b; 


res = div(3,4); 

console.log(res); 

当 输入 了 非 数 值 类 型 的 参数 、 数 值 为 无 穷 的 参数 或 者 被 除数 为 0 时 ， 程 序 会 直接 中 断 ， 
并 在 控制 台 打 印 出 异常 信息 。 如 此 ， 便 十 分 严格 地 对 函数 的 输入 参数 进行 了 约束 。 

使 用 throw 关 键 字 进行 异常 抛 出 的 基本 语法 结构 为 throw exp。 其 中 , throw 为 系统 关键 字 ， 
exp 是 要 抛 出 的 异常 表达 式 ， 其 可 以 为 任意 类 型 。 例 如 ， 上 面 的 示例 代码 中 ， 我 们 实际 上 抛 
出 的 是 一 个 字符 串 值 异常 ， 也 可 以 抛 出 数值 、 布 尔 值 或 者 任意 自 定义 对 象 。 例如 ,我 们 可 以 
为 某 种 特定 的 错误 类 型 创建 一 个 专门 定义 的 对 象 ， 示 例如 下 : 
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var InputError = { 
NotNumberError : "must input a Number Value", 
FinityError : "must input a Number is Finity", 
DividendError:"Dividend must not be 0" 
国 
function div(a,b){ 
if ((typeof a) != "number" || (typeof b) != "number"){ 
throw InputError.NotNumberError; 
} 
if (lisFinite(a)l| !isFinite(b)) { 
throw InputError.FinityError; 
} 
f(b===0) { 
throw InputError.DividendError; 
} 
return a/b; 
} 
var res = div(3,4); 
console.log(res); 
通过 自 定义 异常 对 象 的 方式 更 有 利于 结构 化 和 标准 化 地 对 异常 进行 捕获 与 处 理 。 现 在 ， 
你 已 经 学 会 了 如 何在 代码 中 抛 出 异常 ,但 仅仅 抛 出 异常 是 远 远 不 够 的 ,后面 我 们 将 学 习 如 何 


捕获 异常 、 处 理 异常 与 传递 异常 。 
3-9 ”对 异常 进行 捕获 处 理 


ECMAScript 代 码 中 抛 出 的 异常 如 果 不 进 行 处 理 ， 程 序 就 会 直接 中 断 ， 通 常 这 并 不 是 我 
们 想 看 到 的 结果 。ECMAScript 中 的 try-catch-finally 结 构 用 来 捕获 和 处 理 异 常 。 依 然 使 用 上 一 
个 示例 中 所 编写 的 除法 器 来 做 例子 ， 在 调用 除法 器 函数 时 ， 传 入 一 个 错误 的 参数 如 下 : 


var InputError = { 
NotNumberError : "must input a Number Value", 


FinityError : "must input a Number is Finity", 
DividendError:"Dividend must not be 0" 
; 
function div(a,b){ 
if ((typeof a) = "number" || (typeof b) != "number"){ 
throw InputError.NotNumberError; 
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} 
if (lisFinite(a)ll!lisFinite(b)) { 
throw InputError.FinityError; 
} 
if (b===0) { 
throw InputError.DividendError; 


} 
return a/b; 


} 
Var res = div("3",4); 
console.log(res); 


不 出 所 料 , 程序 运行 时 会 抛 出 异常 并 直接 中 断 。 在 实际 开发 中 , 遇 到 异常 后 , 让 程序 中 
断 并 不 是 一 个 友好 的 选择 ( 尽管 用 户 输入 的 数据 可 能 有 些 随心 所 欲 ) , 我们 应 该 想 办 法 将 错 
误 的 信息 提示 给 用 户 , 并 且 让 程序 跳 过 这 个 异常 。 很 多 情况 下 , 一 个 复杂 的 程序 不 只 有 一 个 
功能 ， 因 为 某 个 功能 的 异常 而 退出 整个 程序 是 让 人 无 法 接受 的 。try-catch-finally 结 构 在 
ECMAScript 中 专门 来 捕获 与 处 理 异 常 。 

多 说 一 点 ， 很 多 高 级 语言 都 有 异常 处 理 机 制 ， 有 编程 基础 的 同学 一 定 对 try-catch-finally 
十 分 熟悉 ， 在 Java 语 言 中 也 有 这 样 的 结构 。Obiective-C 语言 中 对 应 的 结构 为 
@try-@catch-@finally。Swift 语 言 中 的 异常 处 理 略 微 复 杂 一 些 ,但 是 也 有 do-catch 结 构 。 

将 上 面 的 示例 程序 修改 如 下 : 


var InputError = { 
NotNumberError : "must input a Number Value", 
FinityError : "must input a Number is Finity", 
DividendError:"Dividend must not be 0" 
; 
function div(a,b){ 
if ((typeof a) != "number" || (typeof b) != "number"){ 
throw InputError.NotNumberError; 
b 
if (lisFinite(a)ll!isFinite(b)) { 
throw InputError.FinityError: 
1 
if (b===0) { 
throw InputError.DividendError; 
} 
return a/b; 
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try{ 
Var res = div("3",4); 
}catch(e){ 
console.log(e); 
}finally{ 
console.log(" 异 常 处 理 结束 "); 
} 
console.log(res); // 将 打印 undefined 


运行 代码 ， 控 制 台 的 打印 结果 如 图 3-1 所 示 。 


must input a Number Value 
异常 处 理 结束 

undefined 

[Finished in 0.1s] 


图 3-1 进行 异常 捕获 

可 以 发 现 , 这 次 程序 完整 运行 ,下 面 我 们 来 解释 一 下 控制 台 的 打印 信息 是 如 何 来 的 。 首 
先 ,try-catch-finally 结 构 中 的 3 个 关键 字 里 ,try 对 应 的 代码 块 用 来 执行 可 能 会 抛 出 异常 的 代码 ， 
实际 上 ， 如 果 没 有 异常 抛 出 ，catch 结 构 就 是 透明 的 ， 如 果 try 关 键 字 对 应 的 代码 块 中 有 异常 
抛 出 ， 程 序 首先 会 进入 catch 代 码 块 ，catch 代 码 块 的 作用 是 对 抛 出 的 异常 进行 捕获 ， 其 会 将 
抛 出 的 异常 作为 参数 传 入 ,我 们 拿 到 异常 后 , 可 以 根据 异常 类 型 做 相关 四 辑 处 理 。 异 常 处 理 
结束 后 ， 如 果 有 finally 代 码 块 ， 会 执行 finally 代 码 块 中 的 代码 ， 最 后 结束 异常 捕获 处 理 结构 。 
在 try-catch-finally 结 构 中 ， 不 一 定 3 个 代码 块 都 要 存在 ， 可 以 有 如 下 3 种 结构 : 

(1 ) try-catch 

(2 ) try-finally 

(3 ) try-catch-finally 

需要 注意 ，finally 代 码 块 并 不 对 异常 进行 捕获 ， 无 论 有 没有 异常 抛 出 ，finally 代 码 块 都 
会 被 执行 。 同 样 ， 如 果 没 有 catch 代 码 块 但 是 抛 出 了 异常 ， 尽 管 finally 代 码 块 存在 ， 程 序 依然 
会 中 断 。 


3-10 ”传递 异常 
通过 前 面 的 示例 ,你 已 经 学 会 了 如 何 捕获 与 处 理 异常 下面 我 们 将 除法 器 函数 再 进行 一 


层 封装 , 将 异常 处 理 罗 辑 封装 进 新 的 函数 内 部 ,这样 在 其 他 开发 者 调用 这 个 新 的 除法 器 函数 
时 ， 就 无 须 再 担心 程序 中 断 ， 示 例 代 码 如 下 : 
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var InputError = { 
NotNumberError: "must input a Number Value", 
FinityError: "must input a Number is Finity", 
DividendError: "Dividend must not be 0" 
卢 
function div(a, b) { 
if ((typeof a) != "number" || (typeof b) !{= "number") { 
throw InputError.NotNumberError; 
} 
if (lisFinite(a) | lisFinite(b)) { 
throw InputError.FinityError; 
b 
if(b0==—=0){ 
throw InputError.DividendError:; 
} 
return a / b; 
} 


function newDiv(a,b) { 


try{ 
var res = div(a, b); 
} catch (e) { 
console.log(e); 
} finally { 
console.log(" 异 常 处 理 结束 "); 
b 
return res; 


人 res = newDiv("3",4); 

console.log(res); 

经 过 优化 后 ,再 调用 上 面 代 码 中 的 newDiv0 函 数 时 ， 无 论 传 入 什么 参数 ,都 不 会 再 抛 出 
异常 ， 异 常 已 经 在 newDiv0) 函 数 内 部 被 捕获 并 且 处 理 了 。 如 果 我 们 不 在 newDiv0 函 数 内 部 对 
异常 进行 捕获 ,会 怎么 样 处 理 呢 ? 我 想 你 已 经 想到 了 ， 异 常会 被 继续 向 上 传递 ， 从 newDiv() 
函数 抛 出 ， 示 例如 下 : 


function newDiv(a,b) { 
try { 
varres = div(a, b); 
} finally { 
console.log(" 异 常 处 理 结束 "); 
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return res; 


var res = newDiv("3",4); 
}catch(e){ 

console.log("newDiv 处 理 异 常 "); 
h 


控制 台 打 印信 息 如 图 3-2 所 示 

在 ECMAScript 中 ， 一旦 某 个 函数 抛 出 异常 ， 异 常 首 
先 会 传递 到 此 函数 的 调用 方 ， 如 果 调 用 方 有 对 异常 进行 
捕获 处 理 ， 异 常 就 不 再 向 上 传递 ， 如 果 调用 方 没有 对 抛 
出 的 异常 进行 捕获 处 理 ， 则 此 异常 会 继续 向 上 传递 ， 按 
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图 3-2 


异常 的 传递 


照 这 样 的 逻辑 ， 一 层 一 层 地 向 上 传递 ， 直 到 被 捕获 处 理 或 者 不 再 有 可 以 处 理 的 调用 方 。 
明白 了 异常 的 传递 机 制 ， 我 们 可 以 更 加 灵活 地 控制 异常 的 传递 ， 将 异常 进行 分 层 处 理 ， 


示例 代码 如 下 : 


function newDiv(a,b) { 
try { 
var res = div(a, b); 
} catch(e){ 
if (e===InputError.DividendError) { 
res = NaN; 
}else if (e==InputError.FinityError) { 
res = NaN; 
}else{ 
throw e; 
1 
}finally { 
console.log(" 内 层 异 常 处 理 结束 "); 
} 
return res; 
1 
try{ 
var res = newDiv(Infinity,1); 
}catch(e){ 
console.log(" 输 入 错误 1"); 
}finally{ 
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console.log(" 外 层 异 常 处 理 结束 "); 
} 
console.log(res); 
上 面 的 代码 中 ，newDiv0 函 数 只 对 被 除数 为 零 和 参数 有 无 穷 值 的 异常 进行 了 处 理 ， 将 
NaN 直 接 作 为 结果 返回 。 如 果 是 参数 类 型 错误 ，newDiv0 函 数 就 没有 做 任何 逻辑 代码 ， 再 次 
将 异常 抛 出 ， 交 给 调用 方 处 理 。 


3-11 使 用 函数 语句 定义 函数 


几乎 所 有 编程 语言 中 都 有 函数 这 个 概念 , 从 功能 上 讲 , 函数 是 一 组 可 以 随时 运行 的 代码 
语句 ， 是 一 个 代码 块 ， 也 是 一 段子 程序 。ECMAScript 是 一 种 面向 对 象 语言 ， 在 ECMAScript 
的 世界 中 ， 万 事 万 物 都 可 以 是 对 象 。 有 趣 的 是 ， 函 数 在 ECMAScript 中 实质 上 也 是 一 种 功能 
完整 的 对 象 。ECMAScript 中 有 3 种 基本 的 方式 来 定义 函数 ， 分 别 为 函数 语句 定义 法 、 函 数 表 
达 式 定义 法 和 Function 构 造 函 数 对 象 法 。 

ECMAScript 中 有 一 种 特殊 的 语法 可 以 直接 来 定义 函数 ， 在 前 面 的 示例 中 ， 我 们 也 经 常 
使 用 这 种 方法 来 定义 函数 ， 示 例如 下 : 

function outputName(){ 


console.log("Jaki"); 


} 


函数 语句 的 语法 结构 可 以 简化 为 ，function name(param...)f}。 其 中 ，function 为 定义 函 
数 的 关键 字 , name 为 函数 的 名 称 , 通过 函数 名 称 可 以 直接 调用 函数 , 后 面 的 小 括号 中 可 以 定 
义 函 数 的 形 参 ， 大 括号 中 为 函数 核心 函数 体 ， 其 中 可 以 编写 函数 的 具体 逻辑 代码 。 

需要 注意 , 形 参 的 全 称 为 “形式 参数 ”， 其 在 定义 函数 的 时 候 被 定义 ， 用 来 接收 传 入 函 
数 的 参数 。 形 参 在 整个 函数 内 部 使 用 ， 脱 离 函数 内 部 ， 形 参 将 没有 任何 意义 。 与 形 参 对 应 的 
还 有 实 参 ， 实 参 全 称 为 “实际 参数 ”， 是 函数 在 调用 时 确 确实 实 传递 给 函数 的 参数 。 一般 情 
况 下 ， 在 调用 函数 的 时 候 ， 实 参 传递 给 形 参 ， 并 且 一 一 对 应 ， 但 是 ECMAScript 语 言 中 ， 允 
许 开发 者 传 入 的 实 参与 形 参 并 不 对 应 。 

下 面 我 们 来 定义 一 个 带 参 数 和 返回 值 的 函数 ， 代 码 如 下 : 

function outputHello(name){ 

return "Hello "+name; 


console.log(outputHello("Lucy")); /打印 出 Hello Lucy 
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上 面 的 函数 需要 传 入 一 个 姓名 作为 参数 ， 将 姓名 拼接 上 “Hello ”字符 串 后 返回 。 在 
ECMAScript 中 ， 函 数 的 返回 值 不 需要 专门 定义 ( 和 其 他 主流 编程 语言 有 所 区 别 ) ， 直 接 使 
用 retum 关 键 字 来 返回 即 可 。 

事实 上 ， 在 ECMAScript 中 ,任何 一 个 函数 都 有 返回 值 ， 如 果 不 显 式 地 使 用 return 关 键 字 
进行 返回 , 或 者 只 使 用 了 return 关 键 字 ,而 没有 返回 任何 值 ， 函 数 实际 的 返回 值 为 undefined。 

在 ECMAScript 语 言 中 ， 通 过 函数 语句 语法 定义 的 函数 ， 函 数 的 调用 和 函数 的 定义 并 没 
有 严格 的 顺序 ， 其 实 我 们 也 可 以 先 调用 某 个 函数 ， 再 进行 此 函数 的 定义 ， 示 例 代码 如 下 : 

/ 先 调 用 

console.log(outputHello("Lucy")); /打印 出 Hello Lucy 

/后 定义 

function outputHello(name)!{ 


return "Hello "+name; 


} 


上 面 的 代码 可 以 顺利 执行 的 原因 很 简单 ，ECMAScript 语 言 中 有 “变量 提升 ”的 概念 。 
在 程序 执行 之 前 , 解释 器 会 对 全 局 声明 的 变量 、 定 义 的 函数 等 进行 预 处 理 , 因此 在 代码 层面 ， 
函数 的 调用 是 在 定义 前 还 是 在 定义 后 都 无 关 紧要 。 


3-12 ”使 用 函数 表达 式 定 义 函 数 


在 前 面 的 示例 中 说 过 ， 函 数 是 一 种 功能 完整 的 对 象 ， 在 ECMAScript 中 也 可 以 使 用 函数 
表达 式 来 定义 函数 对 象 。 函 数 表达 式 看 上 去 与 函数 语句 十 分 相似 ， 示 例 代码 如 下 : 

/函数 表达 式 

var outputAge = function(age){ 

console.log("My age is "+age); 

要 

outputAge(25); /将 打印 My ageis 25 

上 面 的 代码 在 定义 函数 时 , 等 号 左边 是 一 个 变量 , 等 号 右边 是 一 个 函数 表达 式 。 函数 表 
达 式 实质 上 返回 了 一 个 函数 对 象 ， 将 其 赋值 给 outputAge 变 量 ， 之 后 通过 outputAge 变 量 便 可 
以 直接 对 其 所 指向 的 函数 进行 调用 。 需要 注意 , 函数 表达 式 与 函数 语句 的 语法 最 大 的 区 别 在 
于 其 可 以 省 略 函 数 名 ， 也 可 以 理解 为 函数 表达 式 创建 了 一 个 匿名 函数 。 

函数 表达 式 也 可 以 创建 有 名 称 的 函数 , 这 在 编写 递归 函数 时 十 分 重要 , 可 以 方便 函数 进 
行 自 调用 ， 示 例如 下 : 
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/定义 一 个 递归 阶乘 函数 
var mathFunc = function mathF(a){ 
Var res=a; 
We 
if (a>0) { 
res *= mathFunc(a); 
} 
Teturn res; 
》 
var mathRes = mathFunc(S); 
console.log(mathRes); /120 


需要 注意 , 函数 表达 式 定义 的 函数 名 只 能 在 函数 内 部 使 用 ,对 外 部 来 说 , 实质 上 还 是 一 
种 匿名 函数 。 

还 有 一 点 需要 特别 注意 ， 函 数 表达 式 定义 的 函数 在 函数 定义 之 前 是 不 能 够 进行 调用 的 ， 
你 或 许 会 觉得 奇怪 ,程序 解释 器 不 是 会 对 一 些 全 局 定义 预 处 理 呢 ? 没 错 , 但 是 函数 表达 式 的 
实质 是 将 一 个 函数 对 象 赋值 给 一 个 变量 , 解释 器 只 是 预先 定义 好 了 变量 符号 , 在 表达 式 未 执 
行 之 前 ,此 变量 实际 是 undefined， 函 数 并 不 存在 。 这 也 是 函数 表达 式 与 函数 语句 的 另 一 重大 
区 别 , 函数 语句 定义 后 的 函数 名 是 无 法 修改 的 ,而 函数 表达 式 定义 的 函数 只 是 将 函数 对 象 赋 
值 给 变量 ， 变 量 可 以 重新 赋值 ， 也 可 以 将 函数 传递 给 另 一 个 变量 ， 示 例如 下 : 

/函数 表达 式 

var outputAge = function(age){ 

console.log("My age is "+age); 
要 
/将 outputAge 函数 传递 给 新 的 变量 


var newFunc = outputAge; 


/重新 对 outputAge 赋值 

outputAge = "Hello world"; 

newFunc(25); /将 打印 My ageis 25 
console.log(outputAge); // 将 打印 Hello world 


3-13 ”使 用 Function 构造 器 定义 函数 


函数 在 ECMAScript 中 是 功能 完整 的 对 象 ， 关 于 对 象 ， 你 现在 了 解 的 可 能 并 不 深入 ， 不 
用 担心 ， 后 面 会 有 专门 的 章节 为 你 介绍 ECMAScript 中 的 对 象 。 现 在 你 只 需要 简单 知道 : 对 
象 是 属性 和 方法 的 包装 。 在 ECMAScript 中 ,也 可 以 通过 Function 对 象 和 new 关 键 字 来 构造 函 
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数 对 象 ， 简 单 代码 示例 如 下 : 


var output = new Function("name","console.log(name);"); 


output("Jaki"); // 将 打印 输出 Jaki 


Function 构 造 函 数 的 结构 可 以 简化 为 : Function(param,param...,funcbody)。Function 构 造 
函数 中 的 参数 个 数 并 不 固定 , 最 后 一 个 参数 为 创建 函数 的 函数 体 , 前 面 所 有 的 参数 都 将 作为 
函数 的 形 参 。 需要 注意 , 所 有 的 参数 类 型 都 需要 为 字符 串 类 型 , 函数 体 也 可 以 包装 成 字符 串 。 

事实 上 ， 无 论 是 通过 哪 种 方式 创建 的 函数 ， 其 实质 都 是 Function 类 型 的 对 象 。Function 
实例 对 象 中 有 一 些 内 置 的 属性 , 常用 的 有 arguments 属 性 与 length 属 性 。arguments 属 性 将 返回 
一 个 数组 结构 数据 ， 数 组 中 是 开发 者 传 入 的 所 有 实 参 。length 属 性 将 返回 函数 形 参 的 个 数 。 
有 了 arguments 属 性 ， 我 们 在 使 用 函数 的 时 候 就 不 必 从 形 参 获 取 外 界 传递 至 函数 内 部 的 数据 
了 ， 示 例如 下 : 


function myFuncO{ 

/将 传 入 的 参数 倒叙 输出 

for (vari= arguments.length - 1; i >= 0; i--) { 

console.log(arguments[i]); 

} 
h 
myFunc(1,2,3); // 将 输出 3，2,，1 
需要 注意 ， 函 数 对 象 的 arguments 属 性 内 部 也 有 一 个 length 属 性 ， 这 是 数组 对 象 内 置 的 属 

性 ， 用 于 获取 数组 中 元 素 的 个 数 ， 并 不 是 函数 对 象 的 length 属 性 。 


3-14 ”立即 执行 函数 


关于 ECMAScript 中 的 函数 ， 还 有 一 种 十 分 重要 的 用 法 是 “立即 执行 函数 ”。 无 论 是 使 
用 Function 构 造 函 数 还 是 使 用 函数 表达 式 定义 函 数 ， 实 际 上 都 是 创建 了 一 个 函数 对 象 ， 将 其 
赋值 给 一 个 变量 。 对 于 一 些 只 需要 在 创建 时 执行 一 次 就 不 再 需要 的 函数 , 也 可 以 使 用 如 下 方 
式 编写 : 

(functionO{ 


console.log("run self"); 


DO; /将 打印 run self 


上 面 这 种 方式 在 实际 开发 中 应 用 得 十 分 广泛 , 可 以 用 来 包装 作用 域 隐藏 某 些 内 部 变量 和 
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3-15 “编程 练习 


练习 1: 编写 函数 ， 要 求 使 用 while 语 名 实现 一 个 数 的 阶乘 。 
解析 : 


function func(n){ 
while(n>1){ 
return n*func(n-1); 
} 
return 1; 
} 
console.log(func(5)); /120 


练习 2: 编写 函数 ， 要 求 输入 一 个 整数 ， 将 其 倒序 输出 。 
解析 : 


function func(n){ 
letres=""; 

let temp=n; 

while(temp>=10){ 
res= res+ Math.floor(temp%10); 
console.log(temp); 


temp = Math.floor(temp/10); 


1 
return resttemp; 
hb 
console.log(func(10142)); /1/24101 


练习 3: 编写 函数 ， 将 数组 进行 逆序 并 放 回 原 数 组 中 。 
解析 : 
function func(array){ 
var newArray = []; 
for (vari= array.length - 1; i>= 0; i--) { 
newArray.push(array[i]); 
} 
for (var i= newArray.length - 1; i >= 0; i--) { 
array[i] = newArray[il; 
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} 
} 
var array = new Array(1,2,3,4,5); 
func(array); 
console.log(array); UL 5, 4, 3, 2, 1 ] 


练习 4: 编写 函数 ， 输 入 一 句 话 ， 输 出 最 后 一 个 单词 的 长 度 。 
解析 : 


function func(string){ 
letc=0; 
for (var i= string.length-1; i >=0; i--) { 
if (string.charAt(i) =—=" ") { 
if(c!=0) { 
retum c; 


} 


console.log(func('hello world')); 1/5 
字符 串 的 charAt 函 数 用 来 获取 字符 串 中 某 个 位 置 的 字符 。 


练习 5: 有 一 对 兔子 ， 从 出 生 后 第 3 个 月 起 , 每 个 月 都 生 一 对 兔子 , 小 兔子 长 到 第 三 个 月 


每 个 月 又 生 一 对 兔子 ,假如 兔子 都 不 死 ， 问 每 个 月 的 兔子 总 数 为 多 少 ? 
解析 : 


function func(m){ 
if (m<=2) { 
return 1; 
elsef 
return func(m-1)+func(m-2); 
} 
} 
console.log(func(8)); /1121 


每 个 月 兔子 的 数量 实际 上 是 一 个 斐 波 那 契 数 列 ， 即 满足 规律 : 1，1，2，3，5，8，13， 
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21……。 从 第 3 个 月 开始 ,兔子 的 数量 都 是 前 两 个 月 兔子 数量 的 和 ， 因 此 使 用 递归 来 解决 这 
个 问题 ， 十 分 简单 。 
练习 6: 打印 出 100 ~ 1000 之 间 的 所 有 “水 仙 花 数 ”。 所 谓 “ 水 仙 花 数 ”, 是 指 一 个 三 位 数 ， 
其 各 位 数字 的 立方 和 等 于 该 数 本 身 。 例 如 ，153 是 一 个 “水 仙 花 数 ”， 因 为 153=1? + 了 +3 
解析 : 
function func(){ 
for (vari= 101;i<1000; it+) { 
let a = Math.floor(i/100); 
let b = Math.floor(i/10)%10; 


let c = 1%10; 
if (i==a*a*atb*b*bt+c*c*c) { 
console.log(i); 
} 
} 
b 
func(); //153 370 371 407 


练习 7: 利用 条 件 运 算 符 的 谋 套 来 完成 此 题 : 学习 成 绩 >=90 分 的 同学 用 A 表示 ，60 ~ 89 
分 之 间 的 用 B 表 示 ，60 分 以 下 的 用 C 表 示 。 


解析 : 
function func(s){ 
return s>=907'A':(s>=607'B':'C"); 
} 
console.log(func(90)); IA 


练习 8: 编写 函数 , 输入 字符 串 , 分别 统计 其 中 字母 、 数 字 和 其 他 字符 的 个 数 ， 并 返回 。 
解析 : 


function func(string){ 
let char = 0; 
let fig= 0; 
leto=0; 
for(vari=0;i<string.length; i++) { 
if(string.charCodeAt(i)>='A'.charCodeAt(0)&&string.charCodeAt(i)<='Z'.charCodeAt(0){ 
char++; 
jelse ifl(string.charCodeAt(i)>='a'.charCodeAt(0)&&string.charCodeAt(i)<= 
.charCodeAt(0)){f 
char++; 
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}else 这 string.charCodeAt(iD)>=0.charCodeAt(0)&c&string.charCodeAt(i)<= 
'9'.charCodeAt(0){ 


figtt; 
}else{ 
ott; 
b 
} 
return {char:char,fig:fig,0:0}; 
console.log(func("21dsd^%fs dsa")); /l/{ char: 8, fig: 2, 0: 3 } 


练习 9: 试 着 编写 函数 解决 问题 : 一 球 从 100 米 高 度 自由 落下 , 每 次 落地 后 反 跳 回 原 高 度 
的 一 半 ; 再 落下 ， 求 它 在 第 10 次 落地 时 ， 共 经 过 多 少 米 ? 第 10 次 反弹 多 高 ? 


function func(O){ 

let h = 100; 

let sn = h; 

let hn = sn/2; 

for (vari= 2;i<= 10; i++){ 
sn = sn+2*hn; 
hn = hn/2; 

} 

return {sn:sn,hn:hn}; 


} 


console.log(func()); 


练习 10: 猴子 吃 桃 问题 : 猴子 第 一 天 摘 下 若干 个 桃子 ， 当 时 吃 了 一 半 ， 还 不 过 瘾 ,又 
多 吃 了 一 个 , 第 二 天 早上 又 将 剩 下 的 桃子 吃 掉 一 半 ,， 又 多 吃 了 一 个 。 以 后 每 天 早上 都 吃 了 前 
一 天 剩 下 的 一 半 零 一 个 。 到 第 10 天 早上 想 再 吃 时 ， 见 只 剩 下 一 个 桃子 了 。 求 第 一 天 共 摘 了 
多 少 。 
function funcO{ 
let day = 9; 
leta= 0; 
letb= 1; 
while(day>0){ 
a=(b+1)*2; 
b=a; 
day—; 


83 


现代 JavaScript 编程 : 经 典范 例 与 实践 技巧 


return b; 


} 
console.log(func()); /1/1534 


练习 11: 编程 求解 1+2!+3!+...+20! 的 和 。 
解析 : 


function funcO){ 
let s=0; f=1; 
for (var i= 1; i<=20; i++) { 
t= t*i; 
s=stt; 
} 
return s; 


上 
console.log(func()); //2561327494111820300 


ECMAScript 面向 对 象 编程 


相信 你 对 “对 象 ”一 词 并 不 陌生 ,前面 的 章节 中 我 们 多 次 提 到 对 象 这 个 概念 。 在 代码 的 
世界 里 ， 对 象 就 是 用 来 描述 某 个 特定 的 事物 ， 它 是 对 现实 世界 中 事物 的 抽象 。 面 向 对 象 是 一 
种 软件 开发 方式 , 在 代码 中 使 用 对 象 来 描述 现实 中 的 事物 ， 可 以 使 代码 更 易 理解 维护 ， 同 时 
抽象 性 、 封 装 性 和 可 重用 性 都 会 大 大 提高 。 从 描述 问题 的 方式 来 看 , 编程 语言 可 以 简单 地 分 
为 面向 过 程 语言 和 面向 对 象 语言 。 面 向 过 程 语 言 以 “数据 结构 + 算法 ”的 模式 来 解决 问题 。 
面向 对 象 语言 使 用 “对 象 + 消息 ”的 模式 来 解决 问题 。 相 比 之 下 ， 面 向 过 程 语言 编写 的 代码 
更 简洁 ， 运 行 效率 更 快 ， 适 合 进行 科学 计算 。 

面向 对 象 编程 是 一 种 计算 机 编程 架构 技术 ， 简 称 OOP ( Object Oriented Programming ) 。 
面向 对 象 编程 的 基本 原则 是 程序 是 由 独立 作用 的 对 象 组 成 的 ， 面 向 对 象 编写 的 程序 更 抽象 、 
更 易 懂 , 适合 解决 现实 生活 中 的 问题 , 使 用 面向 对 象 编程 技术 开发 的 软件 有 着 更 好 的 重用 人 性、 
灵活 性 和 扩展 性 。 本 章 首先 介绍 对 象 的 相关 知识 ， 然 后 介绍 ECMAScript 中 的 面向 对 象 编程 
方法 以 及 实现 面向 对 象 编程 的 原理 和 手段 。 
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4-1 创建 对 象 


ECMAScript 是 一 种 基于 对 象 的 脚本 语言 ， 我 们 不 仅 可 以 使 用 语言 内 置 的 许多 对 象 ， 也 
可 以 创建 自己 所 需要 的 对 象 。 使 用 字面 量 创建 一 个 对 象 的 语法 非常 简单 ， 只 需要 使 用 大 括号 
将 需要 封装 的 属性 和 方法 进行 包 庄 即 可 ， 示 例如 下 : 

var teacher = {}; 

console.log(typeof teacher); // 将 打印 object 


上 面 的 第 一 句 代码 创建 了 一 个 空 对 象 ， 将 其 赋值 给 了 变量 teacher。 如 果 使 用 typeof 运 算 
符 对 teacher 变 量 进行 类 型 检查 ， 你 会 发 现 它 实 际 上 是 object 类 型 ， 即 对 象 类 型 。 一 般 我 们 创 
建 对 象 是 为 了 描述 某 个 事物 ， 以 teacher 对 象 为 例 , 我 们 想 让 它 描述 一 个 教师 的 个 人 信息 和 行 
为 ， 一 个 空 的 对 象 是 没有 实际 用 途 的 ， 为 teacher 对 象 添 加 一 些 属性 和 行为 ， 示 例如 下 : 


var teacher = { 

name:" 过 少 "， 

age:25, 

subject:"JavaScript", 

teaching:function() { 

console.log(" 开 始 教 学 "); 

四 
relaxing:function(){ 

console.log(" 开 始 讲 故 事 "); 

} 

由 

上 面 的 代码 为 teacher 对 象 添加 了 3 个 属性 和 2 个 行为 -name 属 性 用 来 描述 教师 的 姓名 , age 
属性 用 来 描述 教师 的 年 龄 ，subject 属 性 用 来 描述 教师 的 教学 科目 。teaching 行 为 用 来 描述 教 
师 的 教学 行为 ，relaxing 行 为 用 来 描述 教师 的 放松 行为 。 你 应 该 明白 了 ， 属 性 描述 的 都 是 一 
些 对 象 信息 ,其 语法 很 像 刍 值 对 ， 冒号 左边 是 属性 名 ,冒号 右边 是 属性 的 值 。 行 为 描述 的 都 
是 对 象 动作 ,在 语法 上 冒号 左边 是 行为 名 称 ,冒号 右边 是 行为 函数 。 需要 注意 , 对 象 属性 的 
值 可 以 是 任何 类 型 ， 当 然 也 可 以 是 男 一 个 对 象 。 

使 用 “点 语法 ”可 以 方便 访问 对 象 的 属性 和 调用 对 象 的 方法 。 示 例如 下 : 

console.log(teacher.name); /打印 教师 的 姓名 

console.log(teacher.age); // 打 印 教师 的 年 龄 

console.log(teacher.subject); /打印 教师 的 专业 
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teacher.teaching(): // 执 行 教学 动作 
teacher.relaxing(); // 执 行 休息 动作 


除了 点 语法 外 ，JavaScript 中 还 可 以 通过 中 括号 法 来 访问 对 象 属性 与 调用 对 象 的 方法 ， 
示例 如 下 : 


console.log(teacher["name"]); /打印 教师 的 姓名 
console.log(teacher["age"]); /打印 教师 的 年 龄 
console.log(teacher["subject"]); /打印 教师 的 专业 
teacher["teaching"]0; // 执 行 教学 动作 
teacher["relaxing"](); // 执 行 休息 动作 


需要 注意 ,使 用 中 括号 法 访问 的 时 候 ， 中 括号 中 的 值 必须 为 字符 串 类 型 。 
4-2 设置 对 象 的 属性 和 行为 


上 一 示例 中 在 创建 teacher 对 象 时 就 已 经 为 这 个 对 象 添加 了 属性 和 方法 。 很 多 时 候 , 对 象 
并 不 是 一 成 不 变 的 , 现实 生活 中 也 是 这 样 , 比如 几 个 月 前 笔者 还 在 教 Swift 编程 语言 , 现在 已 
经 和 你 交流 JavaScript 了 。 其 实 , 我 们 可 以 随时 为 已 经 存在 的 对 象 添加 新 的 属性 方法 或 者 修改 
某 个 属性 方法 。 为 对 象 追加 或 修改 属性 方法 的 语法 也 十 分 简单 ， 示 例如 下 : 

/修改 对 象 的 属性 和 方法 

teacher.subject = "Swift"; /将 专业 修改 为 Swift 

teacher.teaching = function(O){ 

console.log("Teaching Swift"); 

机 

teacher.students = ["July","Jeke","Even"]; /添加 一 个 学 员 列表 

console.log(teacher); 


同样 ， 使 用 方 插 号 法 也 可 以 完成 对 象 的 设置 ， 示 例如 下 : 
/修改 对 象 
teacher["subject"] = "Swift"; // 将 专业 修改 为 Swift 
teacher["teaching"] = function(|){ 

console.log("Teaching Swift"); 
要 
teacher["students"] = ["July","Jeke","Even"]; /添加 一 个 学 员 列表 
console.log(teacher); 


你 一 定 还 记得 ， 我 们 在 学 习 运 算 符 的 时 候 提 到 过 delete 运 算 符 ， 它 的 作用 就 是 删除 对 象 
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的 某 个 属性 或 方法 。 
在 阅读 JavaScript 代 码 时 ， 你 可 能 会 发 现 一 个 出 现 频率 非常 高 的 关键 字 : this。 在 对 象 内 
部 行为 使 用 的 this 关 键 字 将 指向 当前 对 象 本 身 ( 这 是 一 般 情况 ， 并 不 是 必然 情况 ，this 的 指向 
会 随 着 运行 环境 或 调用 者 而 灵活 修改 ) ， 例 如 : 
var person ={ 
name:"Jaki", 
sayHi:function(){ 
console.log("Hi,My name is " + this.name); 
上 
要 
person.sayHi(); // 将 输出 Hi,My name is Jaki 
上 面 代码 中 的 this 指 的 就 是 person 对 象 本 身 ， 其 实 上 面 的 代码 和 下 面 的 代码 功能 完 
一 致 : 
Var person = { 
name:"Jaki", 
sayHi:function(){ 
console.log("Hi,My name is " + person.name); 
上 
}; 
你 可 能 会 问 ， 那 我 们 直接 使 用 person 不 就 好 了 ? 为 什么 非 要 使 用 this 呢 ?的 确 如 此 ， 针 
对 上 面 的 情况 ， 我 们 没有 必要 使 用 this 关 键 字 。 等 到 后 面 更 加 深入 地 学 习 了 面向 对 象 编程 ， 
尤其 是 动态 生成 对 象 的 方法 后 ， 你 就 能 真正 体会 到 this 关 键 字 的 强大 之 处 了 。 现在 就 让 我 们 
拭目以待 吧 ! 


4-3 ”内置 Number 对 象 


在 ECMAScript 中 有 5 种 原始 类 型 : Undefined、Null、Boolean、Number、String。 针 对 
Boolean 、Number 和 String 原 始 类 型 ， 在 ECMAScript 中 还 有 其 对 象形 式 的 包装 ， 并 且 在 必要 
时 ，ECMAScript 会 自动 地 在 原始 值 和 对 象 之 间 转 换 。 由 于 这 些 内 置 对 象 的 存在 ， 我 们 可 以 
方便 地 对 数值 、 字 符 串 等 数据 进行 操作 和 处 理 。 所 谓 内 置 对 象 ， 是 针对 自 建 对 象 而 言 的 , 在 
上 一 示例 中 , 我 们 创建 的 “教师 ”对 象 就 是 自 建 对 象 。 内 置 对 象 则 是 JavaScript 中 预先 定义 为 
开发 者 提供 的 对 象 ， 开 发 者 可 以 直接 使 用 。 
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ECMAScript 中 的 Number 对 象 是 对 原始 类 型 Number 的 包装 。 可 以 使 用 Number 构 造 函 数 
来 进行 实例 创建 ， 首 先 需要 传 入 被 创建 对 象 的 数字 值 。 示 例如 下 : 
varnuml = new Number(5); 


console.log(num!1); // 将 打印 [Number: 5] 
console.log(typeof num1); // 将 打印 object 


如 果 传 入 Number 方 法 中 的 参数 无 法 转换 成 数字 ， 就 会 返回 NaN。 需 要 注意 ， 只 有 使 用 
new 关 键 字 调 用 的 方法 才 叫 构造 方法 ,才能 构建 出 对 象 。 若 直接 使 用 Number 函 数 ， 则 实际 上 
会 返回 一 个 数值 ， 这 种 方式 通常 用 来 强 转 值 的 类 型 。 

在 ECMAScript 中 , 构造 函数 也 是 一 种 对 象 。 实际 上 , Number 函 数 本 身 也 是 一 个 对 象 ( 我 
们 先 将 其 称 为 Number 函 数 对 象 ) ， 只 是 它 的 作用 是 生成 其 他 对 象 (姑且 把 它 生 成 的 对 象 都 
叫 作 Number 实 例 对 象 ) 。ECMAScript 通 过 new 关 键 字 生 成 对 象 的 原理 这 里 先 不 做 过 多 介绍 ， 
后 面 会 专门 讨论 ECMAScript 中 的 原型 机 制 。 现 在 ,你 只 需要 区 别 Number 函 数 对 象 与 Number 
实例 对 象 即 可 。 在 Number 函 数 对 象 中 定义 了 许多 有 意义 的 常量 属性 ， 示 例如 下 : 


/可 以 表示 两 个 数值 之 间 的 最 小 间隔 





console.log(Number.EPSILON); /1/2.220446049250313e-16 
/JavaScript 中 最 大 的 安全 整数 

console.log(Number.MAX SAFE INTEGER); /1/9007199254740991 

// 能 表示 的 最 大 数 

console.log(Number.MAX VALUE); //1.7976931348623157e+308 
// 能 表示 的 最 接近 0 的 数 

console.log(Number.MIN_ VALUE); //Se-324 

// 非 数字 值 

console.log(Number.NaN); /NaN 

// 负 无 穷 大 

console.log(Number.NEGATIVE INFINITY); /-Infinity 

// 正 无 穷 大 

console.log(Number.POSITIVE_INFINITY); //Infinity 


正 负 无 穷 值 当 产 生 溢出 行为 时 会 被 返回 。 Number 函 数 对 象 中 也 定义 了 一 些 常用 的 方法 ， 
示例 如 下 : 

// 判 断 传 入 的 参数 是 否 是 NaN 

console.log(Number.isNaN(1)); 

/独断 是 否 是 有 限 数字 

console.log(Number.isFinite(1)); 

/判断 是 否 为 整数 ， 字 符 串 将 输出 位 false 

console.log(Number.isInteger("1")); 
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// 判 断 是 否 为 安全 的 整数 
console.log(Number.isSafeInteger(1)); 
/将 字符 串 转换 为 浮 点 值 
console.log(Number.parseFloat("1.23")); 
/将 字符 串 转换 为 整数 值 
console.log(Number.parseInt("123.12")); 


上 面 的 属性 和 方法 都 是 Number 函 数 对 象 定义 的 。 
Number 实 例 对 象 中 也 有 一 些 预 定义 的 方法 ， 所 有 的 Number 实 例 对 象 共享 这 些 方法 ， 示 
例如 下 : 


var num2 = new Number(123); 
/将 数字 转换 成 科学 计数 法 ， 传 入 的 参数 为 保留 小 数 的 位 数 


console.log(num?2.toExponential(2)); /1.23e+2 

/将 数字 转换 成 字符 串 ， 传 入 的 参数 为 保留 小 数 的 位 数 
console.log(num?2.toFixed(2)); /1123.00 

/将 数字 转换 为 指定 有 效 数字 长 度 的 数字 ， 传 入 的 参数 为 有 效 数 字 的 位 数 
console.log(num?2.toPrecision(2)); /1.2+e2 

/将 数字 转换 成 字符 串 ， 传 入 的 参数 设置 进 制 
console.log(num2.toString(10)); /123 

/返回 Number 实例 对 象 的 原始 值 


console.log(num2.valueOfO); 

在 使 用 toString() 函 数 将 数值 对 象 转换 为 字符 串 时 ， 可 以 传 入 参数 来 设置 要 转换 成 的 进 
制 。 这 个 进 制 参数 可 以 设置 为 一 个 2 ~ 36 之 间 的 整数 ， 这 个 范围 很 好 理解 ， 数 字 0 ~ 9 加 上 26 
个 英文 字母 ， 最 多 可 以 表达 36 个 数字 ， 因 此 最 大 可 以 描述 到 36 进 制 。 


4-4 Number 对象 与 Number 数值 


ECMAScript 是 一 门 十 分 易 用 并 且 对 异常 要 求 不 严格 的 语言 。 前 面 也 提 到 ， 在 必要 的 时 
候 ， 无 须 开 发 者 关心 ， ECMAScript 会 自动 完成 对 象 与 原始 值 之 间 的 转换 。 如 果 使 用 字面 量 
创建 了 一 个 原始 数值 ， 实 际 上 也 可 以 调用 上 面 的 Number 实 例 对 象 的 方法 ， 示 例如 下 : 


varnum3 = 100; 


console.log(typeof num3); /number 
var str = num3.toString(); 
console.log(typeof str); //string 
console.log(typeof num3); //number 
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如 上 面 的 代码 所 示 ， 需 要 注意 ，num3 在 调用 toString() 方 法 的 时 候 ，ECMAScript 把 其 当 
作对 象 来 处 理 ， 但 实际 上 只 是 创建 了 一 个 中 间 对 象 ， 并 没有 真正 将 原始 值 转 换 成 Number 实 
例 对 象 。ECMAScript 的 这 种 弱 类 型 的 设计 风格 使 我 们 在 编写 代码 时 十 分 畅快 。 另 外 ， 再 简 
单 说 一 些 new 关 键 字 ,使 用 new 关 键 字 在 构造 对 象 时 实际 上 执行 了 3 个 操作 : 首先 创建 一 个 空 
的 对 象 建立 原型 链 ， 之 后 执行 构造 函数 ， 将 函数 中 的 this 关 键 字 与 新 建 的 对 象 进 行 绑 定 ， 最 
后 将 这 个 新 建 的 对 象 返回 。 因 此 ，new 关 键 字 最 大 的 作用 不 仅 是 创建 出 一 个 新 的 对 象 ， 而 是 
原型 链 的 建立 。 在 很 多 场景 中 ， 你 可 能 会 见 到 直接 使 用 Number 函 数 来 创建 数值 ， 并 不 使 用 
new 关 键 字 ， 需 要 注意 ， 这 种 方式 创建 的 是 原始 数值 ， 并 不 是 Number 实 例 对 象 ， 通 常 我 们 可 
以 使 用 这 种 方式 来 完成 其 他 类 型 到 数值 类 型 的 强 转 ， 示 例如 下 : 

varnum4=Number('S7); 

console.log(typeof num4); //number 


4-5 内 置 String 对 象 


String 对 象 是 对 字符 串 的 一 种 包装 。 你 一 定 还 记得 , 在 JavaScript 中 可 以 使 用 双 引号 或 者 
单 引号 来 创建 字符 串 原始 值 ， 同 样 可 以 使 用 String() 构 造 函数 来 创建 字符 串 对 象 ， 示 例如 下 : 

var strl = new String("Hello World"); 

console.log(strl); //[String: "Hello World'] 


你 也 可 以 不 使 用 new 关 键 字 而 直接 使 用 String() 函 数 ， 只 是 这 样 实际 上 是 创建 了 一 个 原始 
类 型 的 String 字 符 串 ， 并 不 是 对 象 ， 这 种 方法 常常 用 来 进行 字符 串 转 换 。 在 实际 开发 中 ， 对 
字符 串 的 操作 将 十 分 频繁 。 举 例 来 说 ,进行 URL 协 议 解析 时 ,开发 者 可 能 需要 截取 URL 中 定 
义 的 参数 。 在 进行 界面 数据 的 填充 时 ， 可 能 需要 对 字符 串 进行 拼接 、 插 入 或 替换 等 操作 。 
ECMAScript 中 的 String 对 象 中 封装 了 许多 属性 和 方法 ， 帮 助 开发 者 便捷 地 对 字符 串 进行 
操作 。 

任何 String 实 例 对 象 都 包含 一 个 length 属 性 ， 通 过 length 属 性 可 以 获取 字符 中 长 度 ， 即 字 
符 个 数 ， 示 例如 下 : 


var strl = new String("Hello World"): 

console.log(strl.length); Ml 

ECMAScript 是 JavaScript 的 标准 ，JavaScript 最 初 的 设计 是 用 于 编写 浏览 器 脚本 ， 因 此 其 
String 实 例 对 象 中 内 置 了 许多 对 HTML 标 签 操作 的 方法 ， 这 不 是 本 示例 的 重点 ， 这 里 我 们 不 
再 深入 讨论 ， 你 只 需要 掌握 字符 串 操作 相关 的 方法 即 可 ， 示 例如 下 : 
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var strl = new String("Hello World"); 
// 返 回 特定 位 置 的 字符 ， 下 标 从 0 开始 


console.log(strl.charAt(0)); lH 

// 返 回 特定 位 置 的 字符 编码 值 

console.log(strl.charCodeAt(0)); /172 

/在 字符 串 后 进行 拼接 ， 将 拼接 后 的 字符 串 返回 

console.log(strl.concat("!")); //Hello World! 

// 获 取 某 个 字符 在 字符 串 中 的 索引 ， 从 前 往 后 找 ， 如 果 没 有 找到 ， 将 返回 -1 

console.log(strl.indexOfR'')); /2 

/获取 某 个 字符 在 字符 串 中 的 索引 ， 从 后 往 前 找 ， 如 果 没 有 找到 ， 将 返回 -1 

console.log(strl.lastIndexOff'D); /19 

/进行 字符 串 的 比较 ， 若 原 字 符 串 小 于 参数 字符 串 ， 则 返回 小 于 0 的 数 ;大 于 则 返回 大 于 0 的 数 ; 
相等 则 返回 0 

console.log(strl.localeCompare("Aello World")); /1 

/使 用 正则 表达 式 对 字符 串 进行 匹配 ， 匹 配 结果 将 返回 一 个 对 象 

console.log(strl.match(/He/)); I/['He', index: 0, input: 'Hello World' ] 

/使 用 正则 表达 式 来 匹配 字符 串 ， 将 匹配 到 的 字符 串 进行 蔡 换 

console.log(strl.replace(/He/,"A1")); /l/Alllo World 

/使 用 正则 表达 式 来 查找 某 个 子 串 的 位 置 ， 如 果 没有 找到 ， 就 返回 -1 

console.log(strl.search(/He/)); /0 

/截取 范围 内 的 子 字符 串 

console.log(strl.slice(0,3)); //Hel 

/分 隔 字符 串 ， 返 回 数组 ， 其 中 第 1 个 参数 为 进行 分 割 的 字符 ， 第 2 个 参数 为 返回 最 多 的 子 串 
个 数 

console.log(strl.split("l",10)); W["He ",'o Wor', 'd' ] 
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/进行 字符 串 的 截取 ， 第 1 个 参数 为 开始 截取 的 位 置 ， 第 2 个 参数 为 截取 的 长 度 
console.log(strl.substr(0,2)); /He 

/截取 下 标 间 的 子 串 

console.log(strl.substring( 1,2)); lie 

/将 字符 串 转 为 小 写 

console.log(strl.toLocaleLowerCase()); //hello world 
console.log(strl.toLowerCase()); //hello world 

/将 字符 串 转换 为 大 写 

console.log(strl.toLocaleUpperCase()); /HELLO WORLD 
console.log(strl.toUpperCase()); WHELLO WORLD 

/去 掉 字 符 串 开 头 和 结尾 的 空格 

console.log(str1 .trim()); 

// 从 字符 串 左 侧 去 掉 空格 

console.log(str1 .trimLeft()); 
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/从 字符 串 右 侧 去 掉 空 格 

console.log(strl.trimRightO); 

/获取 字符 囊 对 象 的 原始 值 

console.log(strl.valueOfD); 

需要 注意 , 上 面 的 所 有 方法 并 没有 修改 原 字符 串 对 象 , 而 是 将 结果 以 字符 串 原 始 值 的 形 
式 进行 返回 。 和 大 多 数 编程 语言 一 样 ，ECMAScript 中 字符 串 的 下 标 也 是 从 0 开始 的 。 在 上 面 
的 示例 代码 中 ，match 、replace 和 search 方 法 都 是 通过 正则 表达 式 来 进行 子 串 的 匹配 的 ， 正 则 
表达 式 用 来 描述 一 种 匹配 规则 ， 后 面 我 们 会 详细 介绍 。ECMAScript 也 会 在 必要 的 时 候 自动 
对 String 原 始 类 型 与 String 对 象 进行 转换 , 这 对 开发 者 来 说 是 透明 的 , 你 也 可 以 直接 使 用 原始 
字符 串 调用 字符 串 对 象 的 属性 和 方法 ， 例 如: 

console.log("Hello".length); //S 


需要 注意 , 对 于 字符 串 截取 方法 slice, 若 传 入 的 参数 为 负数 ， 则 字符 串 长 度 减 去 这 个 负 
数 的 绝对 值 为 最 终 参 数 ， 示 例如 下 : 


console.log("Hello World".slice(-4,-1)); /orl 


4-6 与 HTML 相关 的 String 方法 


上 一 示例 中 介绍 的 都 是 String 内 置 对 象 中 封装 的 通用 方法 ， 还 有 一 些 方法 是 专门 用 来 操 
作 HTML 文 本 的 。 例 如 ， 你 可 以 直接 调用 这 些 方法 将 字符 串 包 装 成 标签 或 超级 链接 ， 示 例 
如 下 : 


var htmlString = "goTo"; 


console.log(htmlString.anchor("name")); //<a name="name">goTo</a> 
console.log(htmlString.big()); //<big>goTo</big> 
console.log(htmlString.blink()); //<blink>goTo</blink> 
console.log(htmlString.bold()); //<b>goTo</b> 
console.log(htmlString.fixed()); /<t>goTo</te> 
console.log(htmlString.fontcolor(red)); //<font color="red">goTo</font> 
console.log(htmlString.fontsize(5)); //<font size="5">goTo</font> 
console.log(htmlString.italics()); //<i>goTo</> 
console.log(htmlString.link("https://www.xxx.com")); /<a 
href="https://www.xxx.com">goTo</a> 
console.log(htmlString.small0); //<small>goTo</small> 
console.log(htmlString.sub()); //<sub>goTo</sub> 
console.log(htmlString.supO); //<sup>goTo</sup> 
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4-7 ” 内置 Boolean 对 象 


Boolean 对 象 是 对 布尔 类 型 原始 值 的 一 种 包装 ,同样 使 用 new 关 键 字 加 构造 函数 的 方法 来 
创建 ， 示 例如 下 : 


var bool = new Boolean(true); 
console.log(bool); /[Boolean: true] 


Boolean 无 论 是 函数 对 象 还 是 实例 对 象 都 没有 封装 什么 实用 的 属性 或 方法 。 但 是 对 于 
Boolean 构 造 函数 的 使 用 ， 需 要 多 加 注意 。Boolean 构 造 函 数 中 所 传 的 参数 不 一 定 必须 是 原始 
布尔 类 型 的 值 ， 若 传 入 的 参数 为 0(、-0、null、false、NaN 、undefined 或 者 空 字符 串 “”， 则 
生成 的 Boolean 对 象 的 原始 值 为 false; 传 入 其 他 任何 值 , 都 将 生成 一 个 原始 值 为 tue 的 Boolean 
实例 对 象 。 示 例如 下 : 


// 以 下 都 将 生成 原始 值 为 false 的 Boolean 对 象 
console.log(new Boolean(0)); 

console.log(new Boolean(-0)); 

console.log(new Boolean(NaN)); 
console.log(new Boolean(undefined)); 
console.log(new Boolean("™")); 

console.log(new Boolean(false)); 
console.log(new Boolean(null)); 

// 下 面 这 些 生 成 的 是 原始 值 为 true 的 Boolean 对 象 
console.log(new Boolean("false")); 
console.log(new Boolean( {})); 

console.log(new Boolean(Infinity)); 
console.log(new Boolean(new Boolean(false))); 


在 使 用 Boolean 实 例 对 象 时 ， 有 一 点 需要 记 住 ， 对 于 JavaScript 中 的 if 条 件 语句 ， 其 判断 
条 件 如 果 是 一 个 对 象 ， 就 会 被 自动 转换 为 tue， 因 此 无 论 Boolean 实 例 对 象 的 原始 值 是 true 还 
是 false， 在 if 你 件 判断 中 都 将 被 作为 true 来 处 理 。 例 如 以 下 代码 : 


var bf = new Boolean(false); 
让 (bb { 

console.log(" 执 行 了 "); 
} 


第 4 章 “ECMAScript 面向 对 象 编程 


上 面 的 示例 依然 会 执行 if 结 构 中 的 代码 。 因 此 , 要 在 判断 条 件 中 使 用 Boolean 对 象 ， 需要 
取 其 原始 值 再 进行 条 件 判断 ， 例 如 : 

Var bf = new Boolean(false); 

if (bf.valueOfO)) { 

console.log(" 执 行 了 "); 

1 

如 果 你 只 是 想 将 其 他 某 个 类 型 的 值 转换 为 布尔 类 型 , 直接 使 用 Boolean() 函 数 即 可 , 转换 
的 规则 和 前 面 所 说 的 一 致 ， 即 0、-0、null、false、NaN 、undefined 或 者 空 字 符 串 “” 将 转换 
为 布尔 值 false， 其 他 都 将 转换 为 布尔 值 true。 


4-8 内 置 Array 对 象 


数组 是 一 种 非常 常用 的 数据 结构 ， 在 ECMAScript 中 ， 数 组 也 是 一 种 对 象 ， 只 是 它 是 列 
表 形式 的 对 象 。 简 单 理解 ， 数 组 就 是 一 种 有 序列 表 。 例 如 ， 我 们 创建 一 个 学 生 名 单列 表 ， 代 
码 如 下 : 

var stus = ["Tom","Jaki","Lucy","Ami"]:; 

console.log(typeof stus); //object 

上 面 的 代码 使 用 中 括号 进行 数组 的 创建 ， 这 是 一 种 非常 便捷 的 创建 数组 的 方法 。 当 然 ， 
我 们 也 可 以 使 用 Array 构 造 方法 来 创建 数组 对 象 ， 这 两 种 方式 创建 出 的 数组 对 象 实质 上 是 一 
样 的 ， 例 如 : 


console.log(typeof array); //object 

数组 中 的 元 素 类 型 并 非 要 保持 一 致 ,它们 可 以 是 任意 类 型 的 组 合 。 需要 注意 , 数组 中 的 
元 素 是 有 序 的 ， 可 以 通过 下 标的 方式 对 它们 进行 访问 。 数组 的 下 标 是 从 0 开始 的 ， 示例 如下: 

/访问 数组 中 第 1 个 元 素 

console.log(array[0]); /Tom 

再 回 过 头 来 看 数组 对 象 的 构造 方法 ，Array0 这 个 方法 中 如 果 只 传 入 1 个 参数 且 为 数值 类 
型 ,就 会 返回 一 个 固定 长 度 的 空 数组 对 象 ; 若 传 入 多 个 参数 或 非 数值 类 型 的 参数 ， 则 会 创建 
数组 并 将 参数 作为 数组 中 的 元 素 。 

需要 注意 ， 虽 然 你 也 可 以 将 数组 理解 为 类 似 这 样 的 对 象 : {0:"Tom".1: "Jaki"}, 但 访问 
数组 中 的 元 素 并 不 能 使 用 点 语法 ， 这 样 的 写法 将 报错 : array.0。 原 因 是 对 象 的 属性 名 称 若 是 
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以 数字 开头 的 ， 则 其 为 非法 的 属性 名 , 不 能 和 点 语法 结合 使 用 ， 只 能 够 通过 中 括号 的 形式 访 
问 。 如 果 你 创建 一 个 自 定义 的 对 象 , 为 其 添加 一 个 以 数字 开头 的 属性 ,依然 无 法 使 用 点 语句 
进行 访问 。 你 可 能 还 会 有 一 个 疑问 : 以 中 括号 方式 进行 属性 的 访问 时 ， 属 性 名 不 是 必须 是 字 
符 串 格式 的 吗 ? 确实 如 此 ， 只 是 如 果 我 们 传 入 的 是 数值 ，ECMAScript 就 会 自动 帮 有 我 们 处 理 
为 字符 串 格式 。 

要 判断 某 一 个 值 是 否 为 数组 类 型 , 可 以 使 用 Array 函 数 对 象 的 isArray0 方 法 , 如 果 传 入 的 
参数 是 数组 对 象 ， 就 会 返回 true， 否 则 将 返回 false， 示 例如 下 : 

/判断 某 个 值 是 否 为 数组 

console.log(Array.isArray(array)); /ltrue 

数组 实例 对 象 中 也 封装 了 许多 属性 与 方法 ， 其 中 length 属 性 可 以 用 于 获取 数组 中 元 素 的 
个 数 : 

var array = new Array("Tom","Jaki","Lucy","Ami"); 

console.log(array.length); /4 

需要 注意 ， 数 组 实例 对 象 的 length 属 性 可 以 被 任意 修改 ， 如 果 将 其 修改 为 小 于 数组 元 素 
个 数 ， 洪 出 的 元 素 将 会 被 清 掉 。 因 此 ， 在 修改 数组 实例 对 象 的 length 属 性 时 要 格外 注意 ， 示 
例如 下 : 


console.log(array.length); /4 
array.length = 2; 
console.log(array); UU[ "Tom', Jaki' ] 


数组 实例 中 封装 的 方法 可 以 分 为 两 类 : 一 类 会 修改 原 数 组 对 象 , 另 一 类 不 会 修改 原 数组 
对 象 ， 会 将 操作 结果 以 新 的 数组 对 象 返 回 。 下 面 这 些 方法 都 会 对 原 数 组 对 象 进行 修改 : 

var array = [0,1,2,3,4,5,6,7,8,9]; 

/删除 数组 最 后 一 个 元 素 

array.pop(O; 

console.log(array); [0,1,2,3,4,5,6,7,8] 

// 在 数组 的 末尾 添加 元 素 

array.push(9,10); 

console.log(array); 从 0,123,456,7.89, 101 

/倒置 数组 

array.reverse(); 

console.log(array); UH[ 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0 ] 

/删除 数组 中 的 第 1 个 元 素 

array.shift(); 

console.log(array); | 
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/对 数组 进行 排序 
array.sort(function(a,b){ 
if (a>b) { 
retur 1; 
jelse if(a<b){ 
return -1; 
Jelse{ 
return 0; 
} 
D; 
console.log(array);  //[ 0, 1, 2, 3, 4, 5, 6, 7, 8,9 ] 


/进行 数组 元 素 蔡 换 ， 第 1 个 参数 表示 开始 蔡 换 的 元 素 下 标 , 第 2 个 参数 表示 要 蔡 换 的 元 素 个 数 ， 
后 面 的 表示 要 蔡 换 的 元 素 列 表 
array.splice(6,4,"100","end"); 


console.log(array); U[ 0, 1, 2, 3, 4, 5, ,'100',end' ] 

// 在 数组 开头 进行 元 素 的 追加 

array.unshift(0,0); 

console.log(array); HI[ 0, 0, 0, 1, 2, 3, 4, 5, '100', 'end' ] 


上 面 列 出 的 方法 中 ,除了 sort() 排 序 方法 外 ， 其 他 都 很 好 理解 。 数 组 实例 对 象 的 sort() 排 
序 方法 需要 传 入 一 个 排序 函数 function(a,b)， 这 个 函数 有 两 个 参数 ， 是 按照 数组 中 的 先后 顺 
序 进行 比较 的 两 个 元 素 。 若 排序 函数 返回 小 于 0 的 值 ， 则 表示 a 元 素 会 排 在 b 元 素 之 前 ; 若 排 
序 函 数 返 回 大 于 0 的 值 ， 则 表示 a 元 素 要 排 在 b 元 素 之 后 ; 若 排序 函数 返回 0， 则 a 元 素 和 b 元 素 
的 相对 位 置 不 变 。 

下 面 这 些 方法 不 会 修改 原 数 组 实例 对 象 : 

var array = [0,1,2,3,4,5]; 

/进行 数组 元 素 追 加 

console.log(array.concat(6,7,8,9)); WO 2 34 5 07:8;91 

/将 所 有 元 素 以 传 入 的 参数 分 隔 进行 拼接 


console.log(array.join(".")); /0.1.2.3.4.5 

/截取 子 数 组 ， 第 1 个 参数 为 开始 截取 的 下 标 ， 第 2 个 参数 为 停止 截取 的 下 标 〈 不 包含 此 位 置 ) 
console.log(array.slice(0,3)); U[0,1,2] 

/将 数组 元 素 拼接 成 字符 串 ， 以 逗号 分 隔 

console.log(array.toString()); //0,1,2,3,4,5 

/返回 数组 中 指定 元 素 的 下 标 ， 从 前 往 后 找 

console.log(array.indexOf( 1)); /1 


/返回 数组 中 指定 元 素 的 下 标 ， 从 后 往 前 找 
console.log(array.lastIndexOf(1)); Ml 
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需要 注意 ， 数 组 中 的 元 素 是 可 以 重复 的 。 
在 实际 开发 中 ， 对 数组 最 频繁 的 操作 是 进行 数组 的 遍历 。JavaScript 中 的 数组 实例 对 象 
支持 很 多 遍历 方法 ， 例 如 : 


var stus = ["Tom","Jaki","Lucy","Ami"]; 


/进行 数组 的 逐个 遍历 ， 需 要 传 入 一 个 函数 ， 此 函数 有 3 个 参数 ， 分 别 为 遍历 到 的 元 素 、 该 元 素 
的 下 标 和 原 数组 。 第 2 个 参数 将 与 遍历 函数 中 使 用 的 this 关联 
stus.forEach(function(element,index,array){ 
console.log(element,index,array); 
},stus); 


/对 数组 进行 检查 ， 传 入 一 个 函数 ， 函 数 中 的 参数 分 别 为 遍历 到 的 元 素 、 该 元 素 下 标 和 原 数 组 。 
此 函数 需要 返回 一 个 布尔 值 ， 如 果 返 回 ture， 就 继续 遍历 ， 如 果 返 回 false， 就 停止 遍历 。 当 所 有 元 素 
都 遍历 完成 并 且 都 返回 true 时 ， 结 果 才 为 tue， 和 否则 都 为 false 

//every 方法 还 可 以 传 入 第 2 个 参数 ， 这 个 参数 将 与 遍历 函数 中 使 用 的 this 关联 

var notHaveAmi = stus.every(function(element,index,array){ 

console.log(this); 
console.log(element,index,array); 
if (element —"Ami") { 

return false; 
jelsef 

return true; 
} 

},stus); 

console.log(notHaveAmi); //false 

//some 遍历 方法 与 every 对 应 ， 只 是 其 回调 如 果 全 部 返回 false， 结 果 才 为 false， 否 则 为 true 

var haveAmi = stus.some(function(element,index,array){ 

console.log(this); 
console.log(element,index,array); 
if (element — "Ami") { 

return true; 
}else{ 

return false; 
} 

},stus); 

console.log(haveAmi); /ltrue 

/数组 过 滤器 : 当 回调 函数 返回 true 时 ， 代 表 此 元 素 通过 过 滤 ， 将 其 添加 进 新 数组 返回 

var newArray = stus.filter(function(element,index,array){ 

console.log(this); 
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console.log(element,index,array); 
if (element — "Ami") { 
return true; 
}else{ 
return false; 
} 
jstus); 
console.log(newArray); I['Ami'] 
//map 方法 将 数组 中 的 每 一 个 元 素 执行 回调 ， 然 后 将 返回 值 重 新 组 成 数组 返回 
newArray = stus.map(function(element,index,array){ 
return element+"!"; 
},stus); 
console.log(newArray); U[ "Tom!, "Jaki!’, 'Lucy!', 'Ami!' ] 
//reduce 方法 是 数组 累加 器 ， 其 会 按照 数组 从 左 向 右 的 顺序 依次 调用 回调 函数 ， 回 调 函 数 中 有 3 
个 参数 ， 第 1 个 参数 为 上 次 执行 累加 回调 的 返回 值 ， 第 2 个 参数 为 当前 遍历 的 元 素 ， 第 3 个 参数 为 其 
下 标 值 。reduce 方法 的 第 2 个 参数 可 选 ， 其 为 首次 进行 累加 回调 的 初始 值 。 如 果 不 提供 初始 值 ，reduce 
函数 会 从 数组 索引 为 1 的 位 置 开始 ， 即 跳 过 索引 为 0 的 元 素 
var res = stus.reduce(function(acc,element,index){ 
return acc+" "+element' 
},"Hello"); 
console.log(res); //Hello Tom Jaki Lucy Ami 
/与 reduce 方法 类 似 ， 其 从 右 向 左 开 始 遍 历 
res = stus.reduceRight(function(acc,element,index){ 
return acc+" "+element; 
},"Hello"); 
console.log(res); //Hello Ami Lucy Jaki Tom 


虽然 在 JavaScript 中 并 没有 严格 要 求 数组 的 遍历 过 程 不 能 对 数组 结构 进行 修改 。 但 是 建 
议 在 过 历 的 过 程 中 不 要 进行 增删 元 素 的 操作 。 若 在 壳 历 过 程 中 向 数组 中 新 增 元 素 ， 则 新 的 元 
素 不 会 被 遍历 到 。 若 删除 元 素 ， 则 会 造成 意料 之 外 的 结 

上 面 列举 的 数组 实例 对 象 遍 历 方 法 略微 复杂 , 虽然 有 详尽 的 注释 , 但 依然 强烈 建议 一 定 
要 自己 动手 练习 。 实 践 出 真知 ， 熟 练 掌握 这 些 遍历 方法 会 让 你 以 后 的 学 习 得 心 应 手 ， 加 油 ! 


4-9 内 置 Date 对 象 
Date 对 象 是 ECMAScript 中 用 来 处 理 日 期 与 时 间 的 。 同样 , 使 用 Date 构 造 方法 来 进行 Date 


实例 对 象 的 创建 ， 在 创建 Date 实 例 对 象 时 有 4 种 传 参 方式 ， 示 例如 下 : 
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/以 当前 时 间 创 建 Date 对 象 

var date = new Date(); 

console.log(date); /2017-02-27T02:11:03.945Z 
// 以 指定 时 间 惟 创建 Date 对 象 ， 时 间 戳 单位 为 毫秒 

date =new Date(1483888888999); 

console.log(date); /2017-01-08T15:21:28.999Z 
/以 指定 的 字符 串 创建 Date 对 象 ， 字 符 串 必须 为 标准 格式 的 时 间 字 符 串 
date = new Date("December 17, 2017 03:24:00"); 
console.log(date); /2017-12-16T19:24:00.000Z 
/设置 年 、 月 、 日 、 时 、 分 、 秒 、 毫 秒 来 创建 Date 对 象 
date = new Date(2017,10,11,8,10,40,133); 
console.log(date); /2017-11-11T00:10:40.133Z 


若 在 构造 函数 中 不 传 入 任何 参数 , 则 默认 使 用 当前 日 期 时 间 创建 Date 实 例 对 象 。 若 传 入 
一 个 数值 类 型 的 参数 , 则 会 将 此 数值 作为 时 间 堆 来 创建 Date 实 例 对 象 , 时 间 截 的 单位 为 毫秒 ， 
代表 从 1970 年 1 月 1 日 起 经 过 的 毫秒 数 。 若 传 入 的 参数 是 一 个 字符 串 , 则 会 以 此 字符 串 表示 的 
日 期 时 间 创 建 Date 对 象 ， 需要 注意 ， 传 入 的 字符 串 参 数 必须 为 标准 的 日 期 时 间 格 式 字符 串 。 
如 果 传 入 的 参数 大 于 1 个 ， 就 会 按照 年 、 月 、 日 、 时 、 分 、 秒 、 毫 秒 的 顺序 进行 读 参 并 创建 
Date 对 象 。 需 要 注意 ， 若 传 入 的 参数 在 1 个 以 上 但 是 不 足 7 个 ， 则 未 传 入 的 参数 将 以 0 代替 ， 
代表 月 数 的 整数 值 需 是 0 ~ 11 之 间 的 一 个 数值 ，0 代 表 1 月 。 

使 用 Date 构 造 函 数 对 象 的 now 方 法 可 以 直接 获取 1970 年 1 月 1 日 至 当前 时 刻 的 时 间 鹤 , 单 
位 为 毫秒 ， 示 例如 下 : 

1/ 返回 从 1970 年 1 月 1 日 起 至 现在 经 过 的 毫秒 数 

console.log(Date.now()); //1488162786627 

Date 构 造 函 数 对 象 的 parse 方 法 用 于 解析 一 个 日 期 时 间 字 符 串 ,将 返回 1970 年 1 月 1 日 至 指 
定 日 期 时 间 的 时 间 稚 ， 单 位 为 毫秒 ， 示 例如 下 : 

/解析 一 个 日 期 时 间 字 符 串 

console.log(Date.parse("December 17, 2017 03:24:00")); /11513452240000 


Date 构 造 函 数 对 象 的 UTC 方法 用 于 将 指定 的 日 期 时 间 转 换 为 时 间 戳 ， 其 参数 规则 与 
Date0) 构 造 函 数 中 最 长 参数 的 形式 一 致 ， 最 多 可 以 接收 7 个 参数 ， 示 例如 下 : 


/指定 日 期 时 间 ， 返 回 时 间 戳 
console log(Date.UTC(2017.0.1.10.30.30.120)): //1483266630120 


你 也 可 以 使 用 Date 实 例 对 象 中 封装 的 一 些 方法 来 直接 获取 想 要 的 信息 ， 示 例如 下 : 


var date = new Date(); 
// 根 据 本 地 时 间 获 取 日 期 对 象 是 当前 月 的 第 几 天 
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console.log(date.getDate()); 

/根据 本 地 时 间 获 取 星 期 ， 从 0 开始 ，0 表示 周 日 
console.log(date.getDay()); 

/根据 本 地 时 间 获 取 日 期 对 象 当前 的 年 份 
console.log(date.getFullY ear()); 

// 根 据 本 地 时 间 获 取 日 期 对 象 当 前 的 小 时 ，0~23 
console.log(date.getHours()); 

// 根 据 本 地 时 间 获 取 日 期 对 象 当 前 的 分 钟 
console.log(date.getMinutes()); 

// 根 据 本 地 时 间 获 取 日 期 对 象 当 前 的 秒 数 
console.log(date.getSeconds()); 

// 根 据 本 地 时 间 获 取 日 期 对 象 当 前 的 毫秒 数 
console.log(date.getMilliseconds()); 

/根据 本 地 时 间 获 取 日 期 对 象 当前 的 月 份 ， 从 0 开始，0 表示 1 月 
console.log(date.getMonth()); 

// 返 回 时 间 蕉 ， 单 位 毫秒 
console.log(date.getTime()); 

/获取 当前 时 区 的 时 区 偏 移 
console.log(date.getTimezoneOffset()); 

/根据 通用 时 间 获 取 当 前 日 期 对 象 是 当前 月 的 第 几 天 
console.log(date.getUTCDate()); 

// 根 据 通 用 时 间 获 取 当 前 日 期 对 象 的 星期 数 ，0 表示 周 日 
console.log(date.getUTCDay()); 

// 根 据 通 用 时 间 获 取 日 期 对 象 当前 的 年 份 
console.log(date.getUTCFullY ear()); 

// 根 据 通用 时 间 获 取 日 期 对 象 当前 的 小 时 
console.log(date.getUTCHours()); 

// 根 据 通用 时 间 获 取 日 期 对 象 当前 的 分 钟 
console.log(date.getUTCMinutes()); 

/根据 通用 时 间 获 取 日 期 对 象 当前 的 秒 数 
console.log(date.getUTCSeconds()): 

// 根 据 通用 时 间 获 取 日 期 对 象 当 前 的 毫秒 数 
console.log(date.getUTCMilliseconds()); 

/根据 通用 时 间 获 取 日 期 对 象 当前 的 月 份 ， 从 0 开始 ，0 表示 1 月 
console.log(date.getUTCMonth()): 


UTC 是 协调 世界 时 的 简称 , 其 又 称 为 世界 统一 时 间或 世界 标准 时 间 , 被 应 用 于 许多 互联 
网 标准 中 。 
下 面 这 些 方法 用 来 修改 Date 实 例 对 象 : 
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var date = new Date(); 

/根据 本 地 时 间 为 日 期 对 象 设置 月 份 中 的 第 几 天 
date.setDate(10); 
/根据 本 地 时 间 为 日 期 对 象 设置 年 份 
date.setFullYear(1999); 

// 根 据 本 地 时 间 为 日 期 对 象 设置 小 时 
date.setHours(11); 

/根据 本 地 时 间 为 日 期 对 象 设置 毫秒 数 
date.setMilliseconds(123); 

// 根 据 本 地 时 间 为 日 期 对 象 设置 分 钟 数 
date.setMinutes(30); 

/根据 本 地 时 间 为 日 期 对 象 设置 月 份 
date.set Month( 1); 
/根据 本 地 时 间 为 日 期 对 象 设置 秒 数 

date.setSeconds(30); 

/根据 时 间 崔 来 设置 日 期 对 象 的 时 间 ， 如 果 早 于 1970 年 1 月 1 日 ， 可 以 设置 为 负 值 
date.setTime(1488167242644); 

/根据 通用 时 间 为 日 期 对 象 设置 月 份 中 的 第 几 天 

date.setUTCDate(10); 

/根据 通用 时 间 为 日 期 对 象 设置 年 份 

date.setUTCFullYear(1970); 

/根据 通用 时 间 为 日 期 对 象 设置 毫秒 数 

date.setUTCMilliseconds(123); 

// 根 据 通用 时 间 为 日 期 对 象 设置 分 钟 数 

date.setUTCMinutes(30); 

/根据 通用 时 间 为 日 期 对 象 设置 月 份 

date.setUTCMonth(1); 

/根据 通用 时 间 为 日 期 对 象 设置 秒 数 

date.setUTCSeconds(30); 


下 面 这 些 方 法 用 于 对 Date 实 例 对 象 进行 格式 化 : 


var date = new Date(); 


/以 一 种 易 读 的 方式 返回 日 其 





console.log(date.toDateString()); /Mon Feb 27 2017 星期 月 日 年 
/返回 符合 ISO 标准 的 日 期 字符 串 

console.log(date.toISOString()); /2017-02-27T05:13:25.025Z 
/使 用 toISOString() 返回 一 个 表示 该 日 期 的 字符 串 
console.log(date.toJSON()); //2017-02-27T05:14:11.414Z 


/返回 一 个 表示 该 日 期 对 象 日 期 部 分 的 字符 串 ， 该 字符 串 格式 与 系统 设置 的 地 区 关联 
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console.log(date.toLocaleDateString()); /2/27/2017 
/返回 一 个 表示 该 日 期 对 象 的 字符 串 ， 该 字符 串 与 系统 设置 的 地 区 关联 
console.log(date.toLocaleString()); /2/27/2017, 1:16:27 PM 


/返回 一 个 表示 该 日 期 对 象 时 间 部 分 的 字符 串 ， 该 字符 串 格式 与 系统 设置 的 地 区 关联 

console.log(date.toLocaleTimeString()); /111:17:00 PM 

// 返 回 一 个 表示 该 日 期 对 象 的 字符 串 

console.log(date.toString()); //Mon Feb 27 2017 13:17:48 GMT+0800 (CST) 

// 以 人 类 易 读 格式 返回 日 期 对 象 时 间 部 分 的 字符 串 

console.log(date.toTimeString()); /13:18:19 GMT+0800 (CST) 

/把 一 个 日 期 对 象 转换 为 一 个 以 UTC 时 区 计时 的 字符 串 

console.log(date.toUTCString()); /Mon, 27 Feb 2017 05:18:43 GMT 

/从 1970 年 1 月 1 日 0 时 0 分 0 秒 (UTC， 即 协调 世界 时 ) 到 该 日 期 的 毫秒 数 ， 与 getTime() 方 
法 一 臻 

console.log(date.valueOf()); 

需要 注意 , 若 在 设置 Date 实 例 对 象 的 年 份 时 使 用 了 两 位 数 , 则 将 默认 表示 为 1900 ~ 1999 
年 之 间 的 年 份 ， 例 如 : 


var date = new Date(90,9,22); 
console.log(date); //1990-10-21T16:00:00.000Z 


为 了 避免 不 必要 的 歧义 ， 最 好 不 要 使 用 两 位 数 来 设置 Date 实 例 对 象 的 年 份 。 
4-10 内 置 Math 对 象 


在 编程 过 程 中 , 数学 运算 十 分 重要 ,毕竟 计算 机 学 科 的 基础 就 是 数学 。 在 各 种 编程 语言 
中 也 都 提供 了 数学 函数 库 供 开发 者 使 用 。 在 ECMAScript 中 ，Math 是 一 个 内 置 对 象 而 并 非 函 
数 对 象 。 这 和 我 们 之 前 学 习 的 内 置 对 象 有 些 不 同 , 这 也 很 容易 理解 ,Math 对 象 的 作用 是 提供 
便利 的 数学 方法 ， 我 们 并 不 需要 创建 出 实例 对 象 。 

在 开发 中 可 能 经 常会 用 到 一 些 数 学 常量 ， 例 如 圆周 率 、 自 然 对 数 等 。Math 对 象 中 包装 
了 一 些 属 性 可 以 直接 获取 这 些 常量 ， 示 例如 下 : 

/数学 常量 

/自然 常数 

console.log(Math.E); //2.718281828459045 

/2 的 自然 对 数 

console.log(Math.LN2); //0.6931471805599453 

/10 的 自然 对 数 


103 


现代 JavaScript 编程 : 经 典范 例 与 实践 技巧 


104 


console.log(Math.LN10); //2.302585092994046 
// 以 2 为 底 EE 的 对 数 

console.log(Math.LOG2E); //1.4426950408889634 
/以 10 为 底 EE 的 对 数 

console.log(Math.LOG10E); /0.4342944819032518 
/圆周 率 

console.log(Math.PT); /3.141592653589793 
/1/2 的 平方 根 

console.log(Math.SQRT1 2); //0.7071067811865476 
/2 的 平方 根 

console.log(Math.SQRT2); /1.4142135623730951 
也 可 以 使 用 Math 对 象 中 提供 的 方法 来 进行 数学 运算 ， 常 用 方法 列举 如 下 : 
/数学 方法 

// 求 绝对 值 

console.log(Math.abs(-4)); /4 

// 求 反 余弦 值 

console.log(Math.acos(0.5)); /1.0471975511965976 
// 求 反正 弦 值 

console.log(Math.asin(0.5)); //0.5235987755982988 
// 求 反正 切 值 

console.log(Math.atan(0.5)); /0.46364760900080615 
/需要 传 入 两 个 参数 x、y， 求 x/y 的 反正 切 值 
console.log(Math.atan2(1,2)); /0.4636476090008061 
/进行 向 上 取 整 

console.log(Math.ceil(1.1)); /12 

// 求 余弦 值 

console.log(Math.cos(0.5)); //0.8775825618903728 
/ 传 入 参数 n， 求 自然 对 数 E 的 n 次 方 
console.log(Math.exp(2)); /7.3890560989306495 
/向 下 取 整 

console.log(Math.floor(2.9)); /2 

/ 传 入 参数 n， 求 以 自然 常数 E 为 底 n 的 对 数 
console.log(Math.log(10)); //2.302585092994046 
// 求 一 组 数 中 的 最 大 值 

console.log(Math.max(1,2,5,3,7)); 17 

// 求 一 组 数 中 的 最 小 值 

console.log(Math.min(1,2,5,3,7)); /1 


/ 传 入 两 个 参数 x、y， 求 x 的 y 次 方 
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console.log(Math.pow(2,3)); /8 
/返回 一 个 0~1 之 间 的 随机 数 
console.log(Math.random()); 

/进行 四 合 五 入 
console.log(Math.round(3.4)); /3 
// 求 正弦 值 

console.log(Math.sin(0.5)); 

// 求 平方 根 

console.log(Math.sqrt(2)); /1.4142135623730951 
// 求 正切 值 

console.log(Math.tan( 1)); 


需要 注意 ， 上 面 所 列举 的 三 角 函 数 方法 的 返回 值 都 是 以 弧度 为 单位 的 。 
4-11 内 置 RegExp 正则 表达 式 对 象 


关于 正则 表达 式 ， 我 们 前 边 在 介绍 String 对 象 时 提 到 过 ， 正 则 表达 式 就 是 用 来 定义 一 种 
规则 ， 通 过 规则 来 对 文本 进行 匹配 。 在 ECMAScript 中 ， 正 则 表达 式 也 是 一 种 对 象 ， 其 可 以 
使 用 RegExp 构 造 函 数 来 创建 。 

你 可 以 通过 两 种 方式 创建 正则 表达 式 对 象 ,最 简单 的 方式 是 通过 字面 量 来 创建 正则 表达 
式 ， 示 例如 下 : 

// 通 过 字面 量 来 创建 正则 表达 式 


var reg = /hello/i; 


通过 字面 量 创建 正则 表达 式 有 这 样 的 规则 : 斜 杠 符 内 编写 正则 表达 式 文本 , 结束 斜 杠 的 
右 侧 指定 匹配 模式 。 匹 配 模式 可 以 是 表 4-1 所 示 的 几 种 标志 的 组 合 。 


表 4-1 正则 表达 式 的 匹配 模式 
匹配 模式 标志 | 作 用 




















G 全 局 匹配 (匹配 到 一 个 结果 后 ， 还 会 继续 向 后 匹配 ， 直 到 结束 》) 
I 匹配 过 程 忽 略 大 小 写 
M 多 行 匹配 模式 (默认 情况 下， 开始 符 ^ 与 结束 符 $ 是 工作 在 单行 模式 的 ， 将 只 匹配 








整个 文本 的 开始 与 结束 ， 配 置 这 个 参数 后 ， 其 会 匹配 每 一 行 的 开始 与 结束 ) 


例如 ， 我 们 对 “Hello world hello” 进 行 不 区 分 大 小 写 的 全 局 匹配 ， 将 会 匹配 到 “Hello” 
和 “hello”， 示 例如 下 : 
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var reg = /hello/ig; 
var res = "Hello world hello".match(reg) 
console.log(res); //[ "Hello', 'hello' ] 


使 用 RegExp 构 造 函 数 对 象 来 创建 正则 表达 式 对 象 ， 示 例如 下 : 

var reg2 = new RegExp("hello",'ig’); 

console.log("Hello world hello".match(reg2)); /Il[ 'Hello', 'hello' ] 

RegExp0 构 造 函 数 中 可 以 传 入 两 个 参数 ( 第 2 个 参数 可 选 ) ， 第 1 个 参数 为 正则 表达 式 字 
符 串 ， 第 2 个 参数 为 匹配 模式 。 

RegExp 构 造 方法 中 的 第 1 个 参数 可 以 传 入 字符 串 形式 的 正则 表达 式 , 也 可 以 直接 传 入 字 
面 量 语法 的 正则 表达 式 ， 例 如 如 下 语法 也 是 正确 的 : 

var reg2 = new RegExp(/hello/,'ig"); 

console.log("Hello world hello".match(reg2)); /I 'Hello', 'hello' ] 

但 是 需要 额外 注意 ， 当 RegExp 构 造 方 法 中 第 1 个 参数 为 字符 串 时 ， 如 果 此 字符 串 中 有 特 
殊 字符 ， 就 需要 进行 转 义 。 例 如 ， 下 面 这 两 个 正则 对 象 是 完全 等 价 的 : 

varre=new RegExp("\w+"); 

var re = A\w+/; 


关于 正则 表达 式 , 还 有 很 多 东西 , 我 们 可 以 深入 探究 一 下 。 正则 表达 式 又 称 规则 表达 式 ， 
其 通过 一 些 符 号 的 组 合 来 定义 一 种 搜索 算法 。 简单 理解 ,一 个 正则 表达 式 就 是 一 个 逻辑 公式 ， 
通过 公式 来 对 文本 进行 精确 或 模糊 搜索 。 正则 表达 式 中 定义 了 一 些 特 殊 字 符 ,， 大 致 可 以 分 为 
4 类 : 字符 类 别 、 字 符 集合 、 边 界 、 数 量词 。 
字符 类 别 用 于 模糊 匹配 , 即 某 一 个 特殊 字符 可 以 代表 某 一 类 字符 。 常用 的 特殊 字符 列表 
如 表 4-2 所 示 。 
表 4-2 ”常用 的 特殊 字符 


示 例 

将 匹配 hell: 

reg = /h..l/; 
"hello".match(reg) 
将 匹配 5h: 

reg = /\dh/; 
"Shello".match(reg); 
将 匹配 Eh: 

reg = /\Dh/; 
"Ehello".match(reg) 





字 符 4 
《人 小数点 ) | 匹配 任意 字符 〈 换 行 符 除 外 ) 





\d 匹配 0 一 9 间 的 任何 一 个 数字 字符 











\D 匹配 任意 一 个 不 是 数字 的 字符 
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( 续 表 ) 
字 符 全 示 例 
Ww 匹配 一 个 字母 、 数 字 或 下 画 线 字符 将 匹配 he: 
reg = /h\w/; 
"Ehello".match(reg); 
WwW 匹配 任意 非 字母 、 非 数字 和 非 下 画 线 的 字 | 将 匹配 h$: 
符 reg = /h\W/; 
"hy$llo".match(reg); 
Ys 匹配 一 个 空白 符 , 包括 空格 、 制 表 符 、 换 | 将 匹配 h e: 
页 符 、 换 行 符 等 reg = /h\se/; 
"h ello".match(reg); 
\S 匹配 任意 一 个 非 空白 字符 将 匹配 he: 
reg = /h\S/; 
"hello".match(reg); 
Vt 匹配 一 个 水 平 制 表 符 
Yr 匹配 一 个 回 车 符 
\n 匹配 一 个 换行 符 
Vv 匹配 一 个 垂直 制 表 符 
证 匹配 一 个 换 页 符 
Mb] 匹配 一 个 退 格 符 
\0 匹配 一 个 NUL 字符 
\xhh 匹配 编码 为 hh 的 字符 十 六 进 制 ) 
\uhhhh 匹配 Unicode 值 为 hhhh 的 字符 








字符 集合 用 于 匹配 某 个 集合 内 的 字符 ， 具 体 含义 的 使 用 示例 如 表 4-3 所 示 。 
表 4-3 ”字符 集合 的 含义 与 示例 




















字符 集合 SX 示 例 
[abc] 匹配 中 括号 内 的 一 个 字符 将 匹配 he: 
reg = /h[abced]/; 
"hello".match(reg); 
[a-b] 匹配 范围 内 的 字符 将 匹配 he: 
reg = /h[a-e]/; 
"hello".match(reg); 
[abc] 匹配 除了 集合 字符 外 的 所 有 字符 
[^a-b] 匹配 除了 集合 范围 外 的 所 有 字符 


表 4-4 所 示 的 特殊 字符 用 来 定义 边界 。 
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表 4-4 ”用 来 定义 边界 的 特殊 字符 











字 符 从 示 例 

i 匹配 字符 串 的 开头 将 匹配 到 h: 
reg= /Mh/; 
"hello".match(reg); 

$ 匹配 字符 串 的 结尾 将 匹配 到 o: 
reg = /0$/; 


表 4-5 中 的 特殊 字符 用 来 设置 匹配 字符 的 数量 。 


"hello".match(reg); 


























表 4-5 ”匹配 字符 数量 的 特殊 字符 
字 符 舍 下 义 示 例 
3 匹配 0 次 或 多 次 x 字 符 将 匹配 到 ell: 
reg = /el*/; 
"hello".match(reg); 
x+ 匹配 1 次 或 多 次 x 字 符 将 匹配 到 ell: 
reg = /el+/; 
"hello".match(reg); 
x 匹配 0 次 或 1 次 x 字符 
x(2!y) 当 x 字符 后 面 不 是 y 字符 时 才 匹 配 将 匹配 到 lo 
reg = /1(?!])./; 
"hello".match(reg); 
xly 匹配 字符 x 或 者 字符 y 
xfn} 匹配 连续 n 个 x 将 匹配 到 11: 
reg=/1{2}/; 
"hello".match(reg); 
x{n,} 匹配 至 少 连续 n 个 x 
x {n,m} 匹配 连续 出 现 n 一 m 个 x 


上 面 我 们 使 用 很 大 篇 幅 来 介绍 有 关 正 则 表达 式 的 基础 知识 , 这 是 十 分 有 必要 的 。 正则 表 
达 式 广泛 应 用 于 用 户 表单 的 验证 。 例如 ,验证 用 户 输入 的 邮箱 、 手 机 号 等 是 否 合法 。 再 回 到 
RegExp 实 例 对 象 ， 其 中 的 一 些 属性 可 以 用 来 获取 设置 的 正则 匹配 模式 ， 示 例如 下 : 


var reg = new RegExp(/1./); 

// 是 否 开 启 全 局 匹配 模式 
console.log(reg.global); //false 
/是 否 开启 忽略 大 小 写 
console.log(reg.ignoreCase); //false 
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/是 否 开启 多 行 模 式 

console.log(reg.multiline); //false 

RegExp 实 例 对 象 中 定义 了 如 下 方法 ， 可 以 直接 对 一 个 目标 字符 串 进行 检测 : 
var reg = new RegExp(/1./); 


// 对 目标 字符 串 进行 正则 匹配 

console.log(reg.exec("hello")); I/[ "lM', index: 2, input: hello' ] 
// 检 测 目标 字符 串 是 否 可 以 通过 正则 验证 ， 即 匹配 到 结果 
console.log(reg.test("hello")); //true 


在 实际 开发 中 ，RegExp 实 例 对 象 的 test 方 法 要 比 exec 方 法 更 加 常用 ,很 多 情况 下 ， 我 们 
都 需要 用 它 来 验证 一 个 字符 串 是 否 符合 规则 。 


4-12” 内置 Function 对 象 


函数 对 你 来 说 一 定 不 陌生 。 我 们 知道 ， 函 数 实际 上 也 是 一 种 对 象 ， 其 是 由 Function 构 造 
函数 创建 出 来 的 。Function 实 例 对 象 中 的 arguments 属 性 可 以 获取 调用 函数 时 所 有 传递 进来 的 
实 参 。length 属 性 可 以 获取 当前 函数 的 形 参 个 数 。 本 示例 中 , 你 将 学 习 到 几 个 Function 实 例 对 
象 的 方法 ， 这 些 方法 在 ECMAScript 面 向 对 象 技术 中 十 分 重要 。 

在 ECMAScript 中 ，this 是 一 个 十 分 重要 的 关键 字 ， 也 是 略微 难于 理解 的 关键 字 。 在 函数 
内 部 ，this 的 值 取决 于 函数 是 如 何 调 用 的 ， 若 直接 调用 全 局 函数 ， 则 函数 内 部 的 this 指 向 全 局 
对 象 。 如 果 函 数 作为 某 个 对 象 的 行为 被 调用 ， 那 么 其 中 的 this 指 向 该 对 象 ， 示 例如 下 : 

var teacher = { 

name:"Jaki", 
e235 
toString:function() { 
console.log(" 姓 名 : "+this.name+"、 年 龄 : "+this.age); 
} 

} 

teacher.toString(); /姓名 : Jaki、 年 龄 : 25 

由 于 toString 方 法 是 由 teacher 对 象 调用 的 ， toString 方法 中 的 this 就 代表 当前 teacher 对 象 本 
身 。 当 在 构造 函数 中 使 用 this 时 ， 则 情况 不 同 , new 关键 字 会 创建 一 个 空 的 对 象 ， 然 后 将 构造 
函数 中 的 this 和 这 个 对 象 进行 绑 定 。 

了 解 了 this 关 键 字 ， 我 们 再 来 看 Function 实 例 对 象 中 的 几 个 方法 就 十 分 容易 理解 了 。 
Function 实 例 对 象 的 apply 方 法 用 于 指定 调用 方法 的 this 值 和 参数 。 我 们 把 前 面 的 代码 略 作 修 
改 ， 示 例如 下 : 
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var teacher = { 
name:"Jaki", 
age:"25", 
toString:function(owner){ 
console.log(ownert" 姓 名 : "+this.name+"、 年 龄 : "+this.age); 
} 
} 
teacher.toString("Teacher"); //Teacher 姓名 : Jaki、 年 龄 : 25 
var student = { 
name:"Lucy", 
age:23 
b 
teacher.toString.apply(student,["Student"]); JStudent 姓名 : Lucy、 年 龄 : 23 


上 面 的 示例 代码 中 创建 了 两 个 对 象 : teacher 与 student。student 对 象 并 没有 toString 方 法 ， 
但 是 我 们 可 以 借助 teacher 对 象 的 toString 方 法 来 打印 student 对 象 的 信息 。Function 实 例 对 象 中 
提供 了 apply 方 法 ， 这 个 方法 可 以 接收 两 个 参数 ， 第 1 个 参数 设置 调用 方法 的 上 下 文 ， 即 函数 
中 this 关 键 字 的 指向 ; 第 2 个 参数 为 一 个 数组 ,数组 中 的 元 素 将 被 作为 实 参 传 入 函数 .有 了 apply 
方法 ， 我 们 可 以 实现 某 个 对 象 调用 其 他 对 象 的 方法 。 如 上 面 的 代码 所 示 ， 就 好 像 student 对 象 
借用 了 teacher 对 象 的 方法 一 样 。 

与 apply 方 法 十 分 类 似 的 还 有 call 方 法 ， 其 作用 也 是 设置 所 调用 函数 中 this 的 指向 与 传 入 
参数 ， 不 同 的 是 call 函 数 中 的 参数 个 数 不 定 ， 第 1 个 参数 为 要 绑 定 到 this 的 对 象 ， 之 后 的 所 有 
参数 都 会 作为 实 参 传 入 函数 ， 示 例如 下 : 

var teacher = { 

name:"Jaki", 
age "25" 
toString:function(owner){ 
console.log(owner+" 姓 名 : "+this.name+"、 年 龄 : "+this.age); 
} 

} 

teacher.toString("Teacher"); //Teacher 姓名 : Jaki、 年 龄 : 25 

var student = { 

name:"Lucy", 
age:23 
} 
teacher.toString.call(student,"Studeng"); //Student 姓名 : Lucy、 年 龄 : 23 
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Function 实 例 对 象 中 还 提供 了 一 个 bind 方 法 ， 这 个 方法 将 会 创建 一 个 新 的 函数 ，bind 方 
法 中 第 1 个 参数 为 新 创建 函数 调用 时 的 this 指 向 , 之 后 所 有 的 参数 都 将 作为 默认 内 置 实 参 传 入 
函数 ， 示 例如 下 : 


var teacher = { 
name:"Jaki", 
age:"25", 
toString:function(owner){ 
console.log(owner+" 姓 名 : "+this.name+"、 年 龄 : "+this.age); 


} 
teacher.toString("Teacher"); //Teacher 姓名 : Jaki、 年 龄 : 25 
var student = { 

name:"Lucy", 


age:23 
} 
var studentToString = teacher.toString.bind(student,"Student"); 
studentToString(); //Student 姓名 : Lucy、 年 龄 : 23 


需要 注意 ，bind 函 数 中 定义 的 参数 在 传 入 新 生成 的 函数 时 ,会 被 置 为 内 置 参 数 ， 放 在 所 
有 实 参 之 前 ， 且 不 会 被 覆盖 掉 ， 示 例如 下 : 


var teacher= { 
name:"Jaki", 
age:"25", 
toString:function(owner){ 
console.log(owner+" 姓 名 : "+this.name+"、 年 龄 : "+this.age); 
console.log(arguments); 


} 
teacher.toString("Teacher"); //Teacher 姓名 : Jaki、 年 龄 : 25 


var student = { 
name:"Lucy", 
age:23 
} 
var studentToString = teacher.toString.bind(student,"Student"); 
//Student 姓名 : Lucy、 年 龄 : 23 
/1/{ 0: 'Student', '1': Hello' } 
studentToString("Hello"); 
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4-13 内置 Object 对 象 


在 ECMAScript 中 ,Object 构造 函数 可 以 理解 为 一 个 对 象 包装 器 , 使 用 这 个 构造 函数 可 以 
创建 出 最 原始 的 实例 对 象 。 我 们 知道 ， 在 ECMAScript 中 ， 自 定义 对 象 有 两 种 方式 ， 示 例 
如 下 : 


/使 用 字面 量 语法 创建 对 象 
var teacher = { 
name:"Jaki", 
age:25, 
teaching:function() { 
console.log("teching..."); 
} 
上 
/使 用 Object 构造 函数 创建 对 象 
var student = new Object(); 
student.name = "Lucy"; 
student.age = 24; 
student.learning = function() { 
console.log("learning..."); 
; 
当 我 们 使 用 Object0 构 造 函 数 来 进行 对 象 的 创建 时 ， 里 面 可 以 传 入 一 个 参数 ， 构 造 函 数 
会 根据 传 入 的 参数 类 型 创建 相应 的 对 象 实例 。 
例如 上 面 定义 的 对 象 都 可 以 直接 通过 点 语法 或 者 中 括号 的 方式 进行 属性 和 方法 的 访问 。 
同样 ， 我 们 也 可 以 自由 地 对 对 象 中 的 属性 方法 进行 枚 举 、 修 改 、 删 除 等 。 实 际 上 ， 对 象 中 的 
属性 和 方法 都 有 一 套 配 置 参数 , 这 些 配置 参数 决定 了 对 象 的 可 读 性 、 可 枚 举 性 和 可 配置 性 等。 


4-14 ”进行 对 象 属性 的 配置 


Object 构造 方法 对 象 中 提供 了 一 个 defineProperty() 方 法 ， 这 个 方法 会 直接 在 一 个 对 象 上 
定义 一 个 新 的 属性 或 者 修改 一 个 已 经 存在 的 属性 。 示 例如 下 : 


/使 用 Object 构造 函数 创建 对 象 
var student = new Object(); 
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studentname = "Lucy"; 

student.age = 24; 

student.learning = function(){ 
console.log("learning..."); 


国 
Object.defineProperty(student,"name",{ 
configurable:true, 
enumerable:true, 
writable:true, 
value:"July" 
)》; 
console.log(student.name); /July 


上 面 的 代码 使 用 defineProperty() 方 法 对 student 对 象 的 name 属 性 进行 了 重新 配置 ， 这 个 方 
法 中 需要 传 入 3 个 参数 ， 第 1 个 参数 为 要 进行 配置 的 对 象 ， 第 2 个 参数 为 需要 进行 配置 的 属性 
名 ， 第 3 个 参数 为 配置 描述 参数 。 

下 面 解释 配置 描述 中 可 选 的 4 个 配置 项 所 代表 的 意义 。configurable 用 来 设置 此 属性 是 否 
是 可 配置 的 , 当 第 一 次 使 用 defineProperty 方 法 对 某 个 属性 进行 配置 时 , 若 将 此 配置 项 设置 为 
false， 则 之 后 不 可 以 再 对 该 对 象 的 这 个 属性 的 配置 进行 修改 。enumerable 配 置 此 属性 的 可 枚 
举 性 , 若 设 置 为 true, 则 此 属性 可 以 被 for-in 结 构 遍 历 到 , 若 配置 为 false, 则 此 属性 不 能 被 for-in 
结构 壳 历 到 。writable 配 置 此 属性 的 可 写 性 , 若 设 置 为 ttue, 则 此 属性 可 以 被 赋值 运算 符 修改 ， 
若 配置 为 flse， 则 此 属性 不 能 被 赋值 运算 符 修 改 。value 项 其 实 就 是 设置 当前 属性 的 值 。 

你 也 可 以 在 defineProperty() 方 法 的 描述 参数 中 定义 getter 与 setter 方 法 。getter 方 法 的 返回 
值 会 被 作为 该 属性 的 值 ，setter 方 法 在 属性 被 赋值 时 被 调用 ， 示 例如 下 : 

/使 用 Object 构造 函数 创建 对 象 

var student = new Object(); 

student.name = "Lucy"; 

student.age = 24; 

student.learning = function(){ 

console.log("learning..."); 

; 

var name = "Lucy"; 

Object.defineProperty(student,"name",{ 

configurable:true, 
enumerable:true, 
get:function(O){ 
console.log(" 正 在 使 用 name 属性 "); 


return name; 
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下 
set:function(value){ 
console.log(" 将 要 设置 name 属性 "); 


name = value; 


} 
D; 
console.log(student.name); // 正 在 使 用 name 属性 Lucy 
student.name = "July"; // 将 要 设置 name 属性 
console.log(student.name); // 正 在 使 用 name 属性 July 


需要 注意 , 描述 参数 中 的 value、writable 两 个 配置 项 与 get、set 两 个 配置 项 不 能 同时 存在 ， 
否则 JavaScript 代 码 在 运行 时 会 抛 出 异常 。 有 了 属性 的 get 和 se 配置 ， 我 们 可 以 方便 地 监听 对 
象 某 个 属性 的 设置 或 获取 ， 添 加 需要 的 业务 逻辑 。 

Object 构造 函数 对 象 中 还 提供 了 一 个 方法 可 以 一 次 定义 或 修改 多 个 属性 ， 示 例如 下 : 


var teacher = { 
name:"Jaki", 
age:25, 
teaching:function(){ 
console.log("teching..."); 
} 
}; 
Object.defineProperties(teacher, { 
"name":{ 
Value:" 理 少 "， 
writable:false 
}, 
"age":{ 
value:25, 
writable:false 


4-15 ”Object 函数 对 象 常用 方法 


除了 前 面 示例 提 到 的 配置 属性 方法 外 ，Obiject 构 造 函 数 对 象 中 还 有 一 些 其 他 针对 实例 对 
象 操作 的 方法 ， 其 中 assign 方 法 可 以 实现 将 几 个 目标 对 象 中 可 枚 举 的 属性 复制 进 源 对象 中 ， 
示例 如 下 : 
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var teacher = { 
name:"jaki", 
age:24, 
teaching:function0){ 
console.log("teaching"); 
} 
四 
var teacher2= { 
subject:"JavaScript" 
} 
Object.defineProperty(teacher,"number",{ 
value:1001, 
enumerable:false 
D; 
console.log(teacher.number); //1001 
for(prop in teachen){ 
console.log(prop); 


} 

/进行 对 象 可 枚 举 属性 的 复制 

var obj = 1}; 

/第 1 个 参数 为 目标 对 象 ， 其 后 的 参数 为 将 被 复制 属性 的 对 象 
Objectassign(obj,teacher'teacher2); 
console.log(obj.name+obj.age+obj.subject); /iaki24JavaScript 
obj.teaching(); /lteaching 

console.log(obj.number); //undefined 


上 面 的 代码 将 teacher 对 象 和 teacher2 对 象 中 的 可 枚 举 属性 全 部 复制 进 了 obj 对 象 中 ， 


/深浅 拷贝 
var objl ={ 
ai:{ 
name:"Jaki" 
} 
b:25 


number 属 性 是 不 可 枚 举 的 , 因此 该 属性 并 没有 被 复制 。 除 此 之 外 ， 从 原型 继承 来 的 属性 也 不 
会 被 复制 ( 原型 与 继承 后 面 会 具体 介绍 ) 。 需 要 注意 ,在 进行 属性 复制 时 ， 源 对 象 不 可 以 是 
null， 若 源 对 象 中 的 属性 名 和 目标 对 象 的 属性 名 重复 ， 则 源 对 象 的 此 属性 值 会 被 覆盖 。 还 有 
一 点 需要 注意 ，assign 方 法 进行 的 复制 都 是 浅 复 制 , 即 若 目 标 对 象 的 某 个 属性 值 是 引用 
则 它 复制 的 是 此 引用 ， 并 不 是 引用 所 对 应 的 值 ， 示 例如 下 : 


类 型 ， 
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上 

var obj2= {}; 

Objectassign(obj2,objl); 

/修改 obj1 

objl.a.name = "Lucy"; 

objl.b= 23; 

/obj2 中 的 b 并 没有 被 修改 ， 因 为 其 是 原始 值 类 型 ， 但 是 a 属性 被 修改 了 ， 因 为 其 是 引用 类 型 
console.log(obj2); /l/{ a: { name: 'Lucy' }, b: 25 } 


Object 构 造 方法 中 的 create 函 数 也 用 于 创建 一 个 对 象 ,其 创建 对 象 的 时 候 可 以 指定 对 象 的 
原型 和 若干 属性 。 这 里 不 需要 深入 理解 对 象 的 原型 。 简单 地 理解 ， 原 型 是 对 象 所 继承 的 对 象 
(类 似 于 “ 父 类 ”) , 对象 可 以 直接 使 用 原型 中 定义 的 属性 。 例如 , 对 于 所 有 讲 JavaScript 教 
程 的 教师 , 我 们 可 以 定义 一 个 父 对 象 ， 其 中 定义 一 个 所 教 课程 的 属性 ， 其 他 由 此 对 象 继承 而 
来 的 子 对 象 中 都 可 以 使 用 这 个 属性 ， 示 例 代 码 如 下 : 


/继承 的 实现 
var base ={ 
subject:"JavaScript" 
} 
var teacherl = Object.create(base, { 
"name":{ 
value:"Jaki", 
enumerable:true 


上 ， 
"agen:{ 
value:25, 
enumerable:true 
1 
D); 
console.log(teacher] ); //{ name: 'Jaki', age: 25 } 
console.log(teacherl .subject); //JavaScript 


需要 注意 ，create 方 法 中 的 两 个 参数 ， 第 1 个 参数 为 所 创建 对 象 的 原型 ， 第 2 个 参数 为 要 
创建 对 象 的 属性 配置 列表 ， 其 和 defineProperties 方 法 中 第 2 个 参数 的 含义 一 致 。 

Object 构 造 函 数 中 的 freeze 函 数 用 于 冻结 对 象 。 冻 结 一 词 指 的 是 不 能 向 对 象 中 添加 新 的 
属性 , 不 能 修改 或 者 删除 对 象 的 属性 , 同样 也 不 能 对 对 象 中 属性 的 配置 进行 修改 。 简单 理解 ， 
冻结 的 对 象 是 一 个 完全 不 可 变 的 对 象 。freeze 方 法 传 入 一 个 对 象 作为 参数 ， 然 后 返回 被 冻结 
的 对 象 。 示 例如 下 : 
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varfre={ 

name:"Jaki" 
国 
fre = Object.freeze(fre); 
fre.name = "Lucy"; 
/冻结 的 对 象 不 能 修改 
console.log(fre); //{ name: Jaki' } 


Object 构 造 方法 中 的 isFrozen 方 法 可 以 获取 某 个 对 象 是 否 为 被 冻结 的 对 象 。 
Object 构 造 函 数 对 象 中 的 getOwnPropertyDescriptor 函 数 用 来 获取 对 象 某 个 属性 的 配置 信 
息 ， 示 例如 下 : 


varfre={ 
name:"Jaki" 

要 
让 
{ value: ‘Jaki', 

writable: true, 

enumerable: true, 

configurable: true } 
又 
var des = Object.getOwnPropertyDescriptor(fre,"name"); 


Object 构造 函数 对 象 中 的 getOwnPropertyNames 函 数 可 以 获取 指定 对 象 所 有 上 自身 的 属性 ， 
从 原型 继承 来 的 属性 不 包括 在 内 。 需要 注意 , 这 个 方法 会 将 可 枚 举 和 不 可 枚 举 的 属性 都 获取 
到 。 示 例如 下 : 


varbase= 
subject:"JavaScript" 
} 
var teacherl = Object.create(base, { 
"name":{ 
value:"Jaki", 
enumerable:true 


上 ， 
"age":{ 
value:25, 
enumerable:true 
} 
D; 
console.log(Object.getOwnPropertyNames(teacher1)); //[ ‘name', age ] 
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Object 构造 函数 对 象 中 的 getPrototypeO 仿 法 可 以 获取 到 某 个 对 象 的 原型 对 象 ， 示 例如 下 : 


varbase={ 
subject:"JavaScript" 


} 
Var teacherl = Object.create(base, { 
"name":{ 
value:"Jaki", 
enumerable:true 
小 
"age 
value:25, 
enumerable:true 
} 
D; 
console.log(Object.getPrototypeOf(teacher1)); I/{ subject: ‘JavaScript’ } 


Object 构 造 函 数 对 象 中 的 seal 方 法 用 来 密封 对 象 ， 密 封 对 象 不 能 添加 新 属性 ， 不 能 删除 


已 有 属性 ,不 能 修改 属性 的 配置 ,但 是 可 以 修改 其 属性 的 值 。 密 封 与 冻结 的 唯一 不 同 是 对 象 
属性 的 值 是 否 可 以 修改 。 示 例如 下 : 


var seal = { 

name:"Jaki" 
要 
self = Object.seal(seal); 
// 密 封 对 象 不 能 添加 新 属性 
seal.age = 25; //undefined 
console.log(seal.age); 


isSealed 方 法 用 来 判断 一 个 对 象 是 否 是 密封 的 。 
除了 冻结 与 密封 外 ,对 象 还 有 “扩展 ”的 概念 。 可 扩展 表示 对 象 可 以 添加 新 的 属性 , 不 


可 扩展 表示 对 象 不 能 够 添 加 新 的 属性 ， 但 是 可 以 删除 和 修改 已 有 的 属性 。Object 构 造 方法 中 
也 有 相应 的 函数 对 对 象 的 可 扩展 性 进行 控制 , preventExtensions 方 法 用 于 抑制 对 象 的 扩展 性 ， 
示例 如 下 : 
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} 

/抑制 对 象 扩展 


ext = ObjectpreventExtensions(ext); 
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ext.age = 25; 
console.log(ext.age); Wundefined 


同样 ， 也 有 isExtensible 方 法 来 判断 某 个 对 象 是 否 是 可 扩展 的 。 

Object 构造 方法 对 象 中 还 定义 了 一 个 keys 方 法 ， 其 会 返回 对 象 自身 可 枚 举 的 属性 名 。 需 
要 注意 ， 其 和 forin 遍 历 结构 还 是 有 一 些 区 别 的 ，keys 方 法 只 会 返回 对 象 自身 的 可 枚 举 属性 ， 
而 forin 电 历 可 以 遍历 出 对 象 原型 链 上 的 可 枚 举 属性 。 示 例如 下 : 


var base={ 
subject:"JavaScript" 
} 
var teacherl = Object.create(base, { 
"name":{ 
value:"Jaki", 
enumerable:true 


小 
"age":{ 
value:25, 
enumerable:true 
} 
»); 
console.log(Object.keys(teacherl)); /l[ ‘name', age' ] 


直接 打印 对 象 实际 上 会 打印 出 对 象 中 可 枚 举 的 属性 。 
4-16 Object 实例 对 象 常用 方法 


上 一 实例 中 介绍 的 是 Object 函数 对 象 封装 的 一 些 常用 方法 。Obiject 实 例 对 象 中 也 有 一 些 
方法 ， 主 要 与 其 属性 的 检测 相关 。hasOwnProperty 方 法 可 以 用 来 检查 对 象 中 是 否 包含 某 个 属 
性 ， 此 属性 必须 是 对 象 本 身 的 ， 不 能 是 从 原型 链 上 继承 来 的 ， 示 例如 下 : 


var teacher= { 


name:"Jaki", 

age:25 
} 
// 判 断 某 个 对 象 本 身 是 否 包 含 指定 的 属性 ， 此 属性 不 是 原型 链 上 的 
console.log(teacher.hasOwnProperty("name")); /ltrue 


isPrototypeOf 方 法 用 来 检查 当前 对 象 是 否 在 某 个 对 象 的 原型 链 上 ， 示 例如 下 : 
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var teacher = new Object(); 


Var prototype= { 
subject:"JavaScript" 
$» 
/设置 原型 
‘Object.setPrototypeOf(teacher,prototype); 
teacher.name = "Jaki"; 
teacher.age= 25; 
teacher.teaching = functionO{ 
console.log("teaching"); 


} 
console.log(prototype.isPrototypeOf(teacher)); /l/ltrue 


propertyIsEnumerable 方 法 用 来 检查 对 象 的 某 个 属性 是 否 是 可 枚 举 的 ， 也 将 返回 布尔 值 ， 
示例 如 下 : 


Var prototype= { 
subject:"JavaScript" 


}» 
/检查 对 象 的 某 个 属性 是 否 为 可 枚 举 的 


console.log(prototype.propertyIsEnumerable("subject")); /ltrue 


4-17 ”面向 对 象 编程 中 的 几 个 重要 概念 


1. 对 象 


对 象 是 面向 对 象 编程 的 核心 , 没有 对 象 就 没有 办 法 面向 对 象 。 对象 是 可 以 实现 某 些 功能 
的 小 单元 ， 对 象 中 会 封装 属性 与 行为 。 在 ECMAScript 语 言 中 , 行为 也 可 以 理解 为 一 种 属性 。 


属性 的 实质 就 是 变量 或 常量 ， 只 是 其 有 特殊 意义 并 与 此 对 象 相关 , 行为 的 实质 就 是 方法 ， 即 
函数 ， 用 来 实现 对 象 的 某 些 功能 。 
2. 类 


面向 对 象 实际 上 也 是 自然 生活 的 一 种 模拟 , 生活 中 存在 各 种 各 样 的 事物 , 一 棵 树 是 一 个 
对 象 ， 一 辆 汽车 是 一 个 对 象 ， 每 个 人 也 是 一 个 对 象 ， 等 等 。 我 们 会 将 对 象 进行 分 门 别 类 ， 例 
如 生物 下 面 分 为 动物 和 植物 ， 动 物 下 面 又 分 为 鱼 类 、 乌 类 、 人 类 等 ， 对 于 人 类 ,我 们 又 可 以 
分 为 男人 和 女人 ,男人 里 面 可 以 再 细 分 ， 如 老年 、 中 年 、 青 年 和 少年 。 将 世间 万 物 分 类 的 基 
础 在 于 同一 类 事物 有 统一 的 属性 和 类 似 的 行为 , 例如 鸟 类 都 有 翅膀 ,可 以 飞翔 。 这 样 的 分 类 
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可 以 使 我 们 更 轻松 地 了 解 自然 ,管理 事物 。 在 程序 的 世界 里 也 是 如 此 ,前 面 我 们 一 直 在 拿 教 
师 对 象 做 示例 , 教师 就 可 以 定义 为 一 个 类 , 所 有 的 教师 都 有 姓名 、 年龄 、 所 教科 目 这 些 属性 ， 
只 是 这 些 属 性 的 值 可 能 不 同 。 


3. 封装 


封装 是 将 属性 和 行为 捆绑 在 一 起 , 创建 对 象 的 过 程 。 封 装 也 是 一 种 抽象 ,例如 实现 生活 
中 的 汽车 工厂 ， 当 原材料 钢铁 、 橡 胶 、 塑 料 等 送 入 工厂 后 ， 经 过 流水 线 的 生产 ， 就 会 有 一 辆 
汽车 从 工厂 中 输出 , 这 个 过 程 就 是 一 种 封装 , 其 核心 思想 是 将 复杂 的 过 程 封闭 在 系统 的 内 部 ， 
对 外 界 只 提供 入 口 和 出 口 。 


4. 继承 


继承 描述 的 是 一 种 关系 , 其 表示 类 的 从 属 关系 。 在 继承 体系 中 , 子 类 会 继承 父 类 的 属性 
和 行为, 子 类 也 可 以 重新 定义 自己 的 属性 和 行为 ， 同 样 , 子 类 也 可 以 修改 从 父 类 继承 来 的 属 
性 和 行为 。 这 很 像 现 实生 活 中 的 父子 关系 ， 和 孩子 会 继承 父亲 的 一 些 外 貌 、 性 格 等 ,但 是 孩子 
也 有 许多 自己 形成 的 个 性 。 

5. 组 合 

简单 理解 , 组 合 就 是 一 个 类 ， 可 以 作为 另 一 个 类 的 属性 。 例 如 , 一 辆 汽车 会 由 很 多 子 零 
件 组 成 ， 轮 胎 是 单独 的 类 ， 引 擎 是 单独 的 类 ,车 体 也 是 单独 的 类 。 这 些 类 组 合 在 一 起 构成 更 
加 复杂 强大 的 汽车 类 。 

6. 多 态 

不 同 对 象 对 同一 消息 有 不 同 的 响应 就 是 多 态 。 举 例 而 言 , 上课 铃 一 响 , 所 有 教师 都 要 开 
始 教 学 动作 , 但 是 不 同 科目 的 教程 所 教 的 内 容 一 定 不 同 。 上 课 铃 可 以 理解 为 消息 , 其 让 教师 
执行 教学 动作 ， 教 学 动作 就 是 对 象 的 响应 ， 不 同 对 象 的 响应 不 同 。 


4-18 用 工厂 方法 模拟 类 


JavaScript 当 初 在 设计 时 只 是 为 了 执行 一 些 简单 的 浏览 器 脚本 ， 如 今 已 经 几乎 无 所 不 能 ， 
从 前 端 到 后 端 ， 使 用 JavaScript 完 成 的 项 目 越 来 越 庞大 。 不 幸 的 是 ，ECMAScript 本 身 并 不 支 
持 类 ， 也 就 是 涪 ，ECMAScript 中 并 没有 类 的 概念 。 但 是 如 果 深 入 挖掘 一 下 类 的 定义 ， 你 会 
发 现在 ECMAScript 中 模拟 出 类 真 的 是 十 分 灵活 和 简单 的 。 

类 说 白 了 就 是 描述 一 类 对 象 的 通用 属性 , 也 可 以 理解 为 类 是 对 象 的 模板 。 如 果 我 们 需要 
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一 个 教师 对 象 , 可 以 直接 定义 这 个 教师 对 象 。 但 是 如 果 我 们 需要 很 多 教师 对 象 ， 你 可 能 已 经 
想到 了 : 我 们 可 以 定义 一 个 工厂 方法 来 生成 教师 对 象 。 这 样 ， 在 需要 教师 对 象 的 时 候 ， 不 需 
要 再 重新 定义 ,调用 这 个 工厂 方法 生成 一 个 教师 实例 对 象 即 可 。 这 个 工厂 方法 实际 上 就 起 到 
了 类 的 作用 ， 在 ECMAScript 中 ， 这 种 函数 被 称 为 构造 函数 。 

需要 注意 , 在 很 多 面向 对 象 语言 中 ， 类 是 对 象 的 基础 ， 对 象 是 由 类 构造 出 来 的 。 类 名 一 
般 要 首 字 母 大 写 ， 对 象 名 首 字母 小 写 ， 这 是 一 种 编程 规范 。 

ECMAScript 中 模拟 类 的 方法 有 很 多 种 ， 如 果 有 兴趣 ， 你 也 可 以 自己 创造 一 种 。 本 书 将 
向 你 介绍 4 种 模拟 类 的 方法 来 抛砖引玉 ， 和 希望 可 以 帮 你 打开 更 宽广 的 思路 。 

工厂 方法 实际 上 也 是 函数 , 定义 一 个 函数 , 在 函数 内 部 创建 一 个 空 对 象 ， 并 对 它 进行 一 
些 类 实例 的 完善 ， 示 例如 下 : 

/模拟 类 


function Teacher(name,age,subject){ 
var obj = 全 
obj.name = name; 
obj.age = age; 
obj.subject = subject; 
obj.teaching = function(){ 
console.log(" 我 是 "+this.name+", 欢 迎 大 家 来 听 "+this.subject+" 教 学 课程 。"); 
} 
return obj; 
} 
var jaki = Teacher("Jaki","25","JavaScript"); 
var lucy = Teacher("Lucy","24","Swift"); 
jaki.teaching(): // 我 是 Jaki, 欢 迎 大 家 来 听 JavaScript 教学 课程 。 
lucy.teaching(); // 我 是 Lucy, 欢 迎 大 家 来 听 Swift 教学 课程 。 


4-19 ”使 用 构造 方法 模拟 类 


上 一 示例 中 的 工厂 方法 其 实 并 非 是 真正 的 构造 方法 , 前 面 我 们 说 过 , 构造 方法 可 以 使 用 
new 关 键 字 来 调用 , 可 以 巧 用 其 中 this 的 指向 来 构造 出 对 象 , 使 用 构造 方法 模拟 创建 一 个 教师 
类 ， 示 例如 下 : 

/模拟 类 

function Teacher(name,age,subject){ 

this.name = name; 
this.age = age; 
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this.subject = subject; 
this.teaching = function(){ 
console.log(" 我 是 "+this.name+", 欢 迎 大 家 来 听 "+this.subjectt" 教 学 课程 。"); 
} 
} 
var jaki = new Teacher("Jaki","25","JavaScript"); 
var lucy = new Teacher("Lucy","24","Swift"); 
jaki.teaching(); // 我 是 Jaki, 欢 迎 大 家 来 听 JavaScript 教学 课程 。 
lucy.teaching(); // 我 是 Lucy, 欢 迎 大 家 来 听 Swift 教学 课程 。 


前 面 介绍 过 new 关 键 字 ， 当 使 用 new 关 键 字 调 用 一 个 函数 时 ， 首 先 创建 一 个 空 对 象 ， 将 
这 个 对 象 与 构造 方法 中 的 this 进 行 绑 定 并 建立 原型 链 ， 之 后 执行 构造 方法 进行 对 象 的 构造 ， 
最 后 将 此 对 象 返回 。 


4-20 ”使 用 Object 函数 对 象 的 create 方法 模拟 类 


在 前 面 的 示例 中 , 你 已 经 学 习 了 Object 构 造 方 法 对 象 中 的 create 函 数 , 这 个 函数 的 作用 是 
创建 一 个 以 某 个 对 象 为 原型 的 对 象 。 我 们 可 以 使 用 这 个 方法 来 模拟 类 ， 代 码 如 下 : 


var Teacher= { 
name:"Jaki", 
age:25, 
subject:"JavaScript", 
teaching:functionO){ 
console.log(" 我 是 "+this.name+", 欢 迎 大 家 来 听 "+this.subject+" 教 学 课程 。"); 


} 
b 
var jaki = Object.create( Teacher); 
jaki.teaching(); // 我 是 Jaki, 欢 迎 大 家 来 听 JavaScript 教学 课程 。 


使 用 这 种 方式 来 模拟 类 有 一 个 次 端 , 在 构造 实例 对 象 的 时 候 没 办 法 传 入 参数 , 如 果 要 对 
对 象 的 属性 进行 赋值 ， 就 必须 在 构造 对 象 后 再 单独 进行 设置 。 


4-21 使 用 封装 法 模拟 类 


封装 法 模拟 类 的 思路 来 源 于 其 他 面向 对 象 语言 的 启发 。 示 例如 下 : 


123 


现代 JavaScript 编程 : 经 典范 例 与 实践 技巧 


var Teacher= { 
init:function(name,age,subject){ 
var teacher = {}; 
teacher.name = name; 
teacher.age = age; 
teacher.subject = subject; 
teacher.teaching = function(O){ 
console.log(" 我 是 "+this.name+", 欢 迎 大 家 来 听 "+this.subject+" 教 学 课程 。"); 
} 


return teacher; 
} 

要 

var jaki = Teacher.init("Jaki",25,"JavaScript"); 

var lucy = Teacher.init("Lucy",24,"Swift"); 

jaki.teaching(); // 我 是 Jaki, 欢 迎 大 家 来 听 JavaScript 教学 课程 。 

lucy.teaching(); // 我 是 Lucy, 欢 迎 大 家 来 听 Swift 教学 课程 。 

使 用 封装 法 模拟 类 有 一 些 先天 的 优势 ， 其 可 以 很 方便 地 在 类 中 定义 私有 属性 和 私有 方 
法 ， 也 可 以 区 别 于 实例 方法 和 属性 很 容易 地 定义 类 方法 和 类 属性 。 

在 许多 面向 对 象 语言 中 都 有 实例 属性 、 实 例 方法 与 类 属性 、 类 方法 的 定义 ， 有 些 语言 也 
会 用 静态 属性 和 静态 方法 来 描述 类 属性 、 类 方法 ( 如 Swift ) ,实例 属性 与 实例 方法 是 绑 定 在 
实例 对 象 上 的 ， 类 属性 与 类 方法 则 是 直接 绑 定 在 类 上 的 。 


4-22 ”使 用 对 象 冒充 的 方式 实现 继承 


在 ECMAScript 中 ， 实 现 继承 机 制 的 方式 也 多 种 多 样 。 和 模拟 类 的 学 习 过 程 相似 ， 本 书 
会 向 你 介绍 3 种 实现 继承 机 制 的 方法 ,分 别 为 对 象 冒充 法 、 原 型 法 和 混合 法 。 希 望 你 学 习 了 
这 些 方法 后 可 以 打开 思维 ， 更 深入 地 理解 ECMAScript 语 言 的 精 藤 。 

对 象 冒充 的 方式 利用 了 ECMAScript 中 this 关 键 字 的 特性 ， 你 一 定 还 记得 ，this 关 键 字 在 
函数 内 出 现时 ， 表 示 所 调用 此 函数 的 对 象 。 以 教师 类 为 例 , 首先 所 有 的 教师 都 是 人 类 ， 人 类 
都 有 年 龄 和 姓名 ， 因 此 ， 我 们 可 以 创建 一 个 People 类 作为 教师 类 的 父 类 ， 示 例 代 码 如 下 : 

/创建 People 类 作为 父 类 

function People(name,age)f 

this.name = name; 
this.age = age; 
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function Teacher(name,age,subject){ 
// 这 一 步 的 作用 是 转换 this 的 指向 
this.init = People; 
this.init(name,age); 
delete this.init; 
// 添 加 教师 类 特有 的 属性 
this.subject = subject; 
this.teaching = function(){ 
console.log(" 教 师 "+this.name+" 正 在 教授 "+this.subject+" 课 程 。"); 
}; 
} 
var jaki = new Teacher("Jaki",25,"JavaScript"); 
var lucy = new Teacher("Lucy",24,"Swift"); 
jaki.teaching(); // 教 师 Jaki 正在 教授 JavaScript 课程 。 
lucy.teaching(); // 教 师 Lucy 正在 教授 Swift 课程 。 


上 面 的 示例 代码 创建 了 一 个 最 简单 的 继承 体系 , Teacher 实 例 对 象 成 功 继承 了 People 类 中 
定义 的 姓名 和 年 龄 属性 。 其 实 可 以 将 上 面 的 代码 进行 简化 ,改变 函数 内 this 的 指向 , 使 用 call 
函数 和 apply 函 数 都 可 以 做 到 ， 示 例如 下 : 


function People(name,age)!{ 
this.name = name; 
this.age = age; 
function Teacher(name,age,subject){ 
People.call(this,name,age); 
this.subject = subject; 
this.teaching = function() { 
console.log(" 教 师 "+this.name+" 正 在 教授 "+this.subject+" 课 程 。"); 
}; 
| 
var jaki = new Teacher("Jaki",25,"JavaScript"); 
var lucy = new Teacher("Lucy",24,"Swift"); 
jaki.teaching(); // 教 师 Jaki 正在 教授 JavaScript 课程 。 
lucy.teaching(); // 教 师 Lucy 正在 教授 Swift 课程 。 


要 实现 多 继承 也 十 分 容易 ， 示 例如 下 : 


function People(name,age){ 
this.name = name; 
this.age = age; 


125 


现代 JavaScript 编程 : 经 典范 例 与 实践 技巧 


} 

function Work(time){ 
this.time = time; 

} 


function Teacher(name,age,subject){ 

People.call(this,name,age); 

Work.call(this, 8); 

this.subject = subject; 

this.teaching = function|){ 

console.log(" 教师 "tthis.name+" 正 在 教授 "+this.subjectt" 课 程 。"+" 工 作 时 间 : 
"+this.timet+" 小 时 。"); 

};; 
} 
var jaki = new Teacher("Jaki",25,"JavaScript"); 
var lucy = new Teacher("Lucy",24,"Swift"); 
jaki.teaching(): // 教 师 Jaki 正在 教授 JavaScript 课程 。 工 作 时 间 : 8 小 时 。 
lucy.teaching(); /教师 Lucy 正在 教授 Swift 课程 。 工 作 时 间 : 8 小 时 。 


上 面 的 代码 创建 了 一 个 人 类 和 一 个 职业 类 ， 教 师 类 既 有 人 类 的 属性 又 有 职业 类 的 属性 。 

使 用 对 象 冒充 的 方式 实现 继承 体系 十 分 简单 , 但 是 严格 来 讲 , 其 并 非 是 真正 意义 上 的 继 
承 ， 只 是 巧 用 了 ECMAScript 中 this 的 特性 。 使 用 原型 链 的 方式 会 实现 更 加 类 似 于 传统 意义 上 
的 继承 。 还 有 一 点 需要 注意 ， 多 继承 是 指 一 个 子 类 可 以 有 多 个 父 类 。C++ 是 支持 多 继承 的 一 
种 语言 ，Java、Objective-C、Swift 等 语言 并 不 支持 这 种 特性 。 


4-23 ”使 用 原型 链 的 方式 实现 继承 


原型 链 是 ECMAScript 中 最 难 理解 也 是 最 令 人 费解 的 一 部 分 。 为 了 便于 理解 ， 我 们 可 以 
再 来 研究 一 下 new 关 键 字 到 底 做 了 什么 。 首先, 在 ECMAScript 中 ,你 要 始终 保持 除 原始 值 外 
万 事 万 物 都 是 对 象 这 样 一 种 思想 , 函数 也 是 一 种 对 象 。 当 创建 函数 时 ， 首 先 会 创建 这 个 函数 
对 象 本 身 ， 除 此 之 外 ， 还 会 创建 一 个 对 象 作为 此 函数 对 象 的 prototype 属 性 ， 例 如 : 


function PeopleO{ 
this.sayHi=function(O){ 
console.log("HelloI am "+this.name+","+this.age+" years old。"); 
} 


} 
console.log(People.prototype); /People {} 
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你 一 定 奇怪 ， 这 个 People 函数 的 prototype 为 什么 会 打印 出 People 由 这 样 的 信息 。 其 实 这 
只 是 一 种 格式 化 的 输出 ， 函 数 的 prototype 就 是 一 个 普通 的 Object 对 象 ， 这 个 对 象 中 自动 生成 
了 一 个 属性 constructor，constructor 默 认 指 向 当前 的 函数 对 象 ( 即 People ) 。 当 使 用 new 关 键 
字 调 用 People 方法 进行 实例 对 象 的 构造 时 ， 会 以 如 下 步骤 进行 : 

C01 创建 空 对 象 {}， 暂 且 命 名 为 obj。 

902 将 构造 函数 中 的 this 指向 obj， 并 将 obj 的 _proto 属性 指向 构造 函数 的 
prototype 属性 ， 建 立 原 型 链 。 

本 03 执行 构造 函数 (prototype 中 的 constructor 指向 的 函数 ， 默 认为 函数 本 身 ) 。 

704 将 对 象 obj 返 

这 里 还 有 必要 介绍 一 些 _proto 属性 ， 其实 是 Object 实 例 对 象 中 的 一 个 私有 属性 ， 这 个 
属性 指向 当前 对 象 的 原型 对 象 。 

上 面 的 文字 描述 可 能 不 是 很 容易 理解 ， 图 4-1 比 较 直 观 地 解释 了 原型 链 的 原理 。 











日 








Function 函 数 对 象 


prototype 属 性 






使 用 new 关 键 字 构 造 实例 对 象 


__proto__ 属 性 


图 4-1 原型 链 示 意图 
使 用 原型 链 的 方式 实现 继承 ， 示 例 代码 如 下 : 


function PeopleO{ 
this.sayHi=function(O){ 
console.log("Hello,I am "+this.name+","+this.aget+" years old。"); 
} 
} 
function Teacher(name,age,subject){ 
this.name = name; 
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this.subject = subject; 
this.age = age; 
bh 
// 设 置 prototype 属性 
Teacher.prototype = new People(); 
var jaki = new Teacher("Jaki",25,"JavaScript"); 
var lucy = new Teacher("Lucy",24,"Swift"); 
jaki.sayHi(); //Hello,l am Jaki,25 years old。 
lucy.sayHi(); //Hello,l am Lucy,24 years old。 


上 面 的 代码 在 Teacher 实 例 对 象 中 并 没有 sayHi 方 法 ， 在 代码 执行 时 ， 首 先 会 在 Teacher 
实例 对 象 内 部 寻找 这 个 方法 ,如 果 没 有 找到 , 会 从 实例 对 象 的 _proto_ 属 性 中 寻找 , 这 个 属 
性 其 实 就 是 Teacher 函 数 对 象 的 prototype 指 向 的 对 象 ， 即 People 实 例 对 象 。 在 这 个 People 实 例 
对 象 中 找到 了 sayHi 方 法 ， 将 此 方法 返回 ， 如 果 没 有 找到 ， 再 从 People 实例 对 象 的 _proto 
属性 里 找 , 一 层 一 层 递归 下 去 ,直到 找到 或 者 最 终 对 象 的 _proto 属性 为 undefined。 访问 属 
性 时 也 是 一 样 的 原理 ， 这 便 形成 了 一 套 完 整 的 原型 链 。 

使 用 原型 链 实现 继承 有 一 个 很 大 的 优势 ， 其 可 以 使 用 instanceof 关 键 字 来 检查 某 个 构造 
函数 是 否 在 对 象 的 原型 链 上 ， 这 类 似 于 检查 某 个 对 象 是 否 为 某 个 类 或 其 子 类 的 实例 ， 示 例 
如 下 : 

console.log(jaki instanceof People); /lltrue 


当然 , 原型 链 的 继承 模式 也 有 一 些 缺 点 , 比如 原型 链 是 单 链 , 无 法 实现 多 继承 。 通过 原 
型 链 继 承 来 的 子 类 的 实例 在 访问 属性 时 可 能 会 付出 一 定 的 性 能 做 代价 , 因为 其 总 是 递归 遍历 
从 下 往 上 查找 属性 的 ， 如 果 访 问 一 个 undefined 的 属性 ， 此 性 能 代价 会 更 大 。 

最 后 提 一 点 ， 在 ECMAScript 中 没有 严格 的 私有 属性 的 定义 ， 这 里 说 的 私有 属性 其 实 是 
编码 习惯 上 的 , 在 开发 中 , 我 们 常常 把 不 想 让 外 界 访问 的 属性 使 用 双 下 画 线 开头 和 结尾 , 将 
其 作为 一 种 编码 规范 上 的 私有 。 


4-24 ”使 用 混合 模式 实现 继承 


对 象 冒充 的 方式 实现 的 继承 归根 到 底 是 一 种 假 继承 ,实质 上 所 有 实例 对 象 都 有 一 套 完 整 
的 属性 和 方法 , 一 般 不 同 对 象 的 属性 值 各 有 差异 , 每 个 对 象 都 有 一 套 独 立 的 属性 这 点 倒 不 是 
问题 ,问题 在 于 所 有 同类 的 实例 对 象 方法 都 是 一 致 的 , 每 个 对 象 都 有 独立 的 一 套 就 失去 了 继 
承 的 意义 。 原 型 链 的 方式 实现 继承 时 , 父 类 的 方法 是 放 在 原型 对 象 中 的 , 并 不 在 对 象 本 身 里 ， 
因此 所 有 同类 的 实例 对 象 都 是 共享 这 些 方法 的 , 但 是 也 有 一 个 致命 的 缺陷 , 这 种 方法 无 法 在 
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原型 对 象 创建 时 指定 参数 , 这 也 是 为 什么 上 面 的 示例 中 将 教师 姓名 、 年龄 属性 放 在 子 类 中 而 
不 是 父 类 中 。 那么 如 何 实现 继承 才 是 最 优 的 模式 呢 ? 答案 很 简单 , 将 属性 使 用 对 象 冒充 的 方 
式 来 继承 ， 方 法 使 用 原型 链 的 方式 来 继承 。 示 例如 下 : 


function People(name,age){ 
this.age = age; 
this.name = name; 
有 
/方法 都 放 入 原型 链 中 
People.prototype = { 
constructor:People, 
sayHi:function(){ 
console.log("Hello,I am "+this.name+","+this.aget+" years old。"); 


} 

} 

function Teacher(name,age,subject){ 
// 用 对 象 冒充 把 属性 继承 过 来 
People.call(this,name,age); 
this.subject = subject; 


Teacher.prototype = new People(); 

var jaki = new Teacher("Jaki",25,"JavaScript"); 

var lucy = new Teacher("Lucy",24,"Swift"); 
jaki.sayHi(); //Hello,l am Jaki,25 years old。 
lucy.sayHi(); //Hello,l am Lucy,24 years old。 


这 种 混合 模式 实现 的 继承 也 是 基于 原型 链 的 ， 因 此 可 以 使 用 instanceof 关 键 字 判断 对 象 
是 否 是 某 个 类 或 其 子 类 的 实例 。 许 多 编译 型 语言 对 语法 都 有 着 严格 的 控制 ， 相 比 之 下 ， 
ECMAScript 真 的 是 一 种 非常 灵活 的 语言 ， 只 要 敢 想 ， 动 手 去 尝试， 你 会 发 现 其 中 乐趣 无 限 。 


4-25 ”编程 练习 


练习 1: 使 用 数组 的 排序 方法 实现 数组 元 素 的 乱 序 。 
解析 : 


var a = [1,2,3,4,5,6,7,8,9,0,12,23,45,90]; 
a.sort(function (a,b) { 
var sign = (Math.random()>0.5) ? 1 : -1; 
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return (a-b)*sign; 

D; 

练习 2: 编写 函数 ， 去 除数 组 中 的 重复 元 素 。 

解析 : 

var a = [1,2,2,2,5,2,7,8,9,0,12,23,45,90]; 

function deRepeat(arr) { 

let newArr = []; 
arr.map(function (item) { 
if(newArr.indexOflitem) =—= -1){ 
newArr.push(item); 
六 
return newArr; 

| 

console.log(deRepeat(a)); I 1, 2, 5, 7, 8, 9, 0, 12, 23, 45, 90 ] 

练习 3: 编写 一 个 函数 , 输入 字符 串 , 判断 字 字 符 串 中 是 否 存 在 连续 的 字母 (a~z 或 A~Z ) 

解析 : 

function containsRepeatingLetter(str) { 

return /([a-zA-Z]N\1/.test(str); 

} 

上 面 的 正则 表达 式 使 用 了 新 的 语法 ，“( ) ”用 来 进行 分 组 ，“\1” 表 示 对 第 1 个 分 组 
进行 引用 ， 上 面 的 正则 描述 重复 出 现 两 次 相同 的 字母 。 

练习 4: 分 析 这 行 代码 执行 后 的 结果 : ["1", "2", "3"].map(parseInt);。 

解析 : 

不 运行 代码 要 答对 本 题 还 是 有 相当 的 难度 。 数组 的 map 函 数 用 来 进行 数组 的 过 历 并 且 执 
行 回调 ， 回 调 可 以 接收 3 个 参数 ， 分 别 为 当前 遍历 到 的 元 素 值 、 元 素 索 引 和 数组 对 象 本 身 。 
parseInt 是 JavaScript 中 的 一 个 全 局 函数 ， 其 作用 是 将 字符 串 转换 成 数值 ， 这 个 函数 可 以 接收 
两 个 参数 ， 第 1 个 参数 为 要 转换 的 字符 串 ， 第 2 个 参数 指定 进 制 (2 ~ 36 之 间 ) ， 如 果 参 数 不 
合法 ， 将 会 返回 NaN， 所 以 上 面 的 代码 实际 上 是 执行 如 下 3 条 语句 : 

parseInt('1', 0); 

parselnt(2', 1); 

parselnt('3', 2); 
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最 终 的 结果 为 : 

[1, NaN, NaN] 

练习 5: 编写 函数 ， 要 求 传 入 两 个 数组 ， 进 行 合并 后 返回 新 的 数组 。 
解析 : 

function func(arrl,arr2){ 


return arrl .concat(arr2); 
} 
console.log(func([1,2,3],[4,5,6])); 


练习 6: 编写 函数 ， 要 求 移 除 数组 中 的 某 个 元 素 。 
解析 : 
function func(arr,item){ 
for(vari= 0; i < arr.length; i++){ 
ifarr[i] =— item){ 
arr.splice(i,1); 


} 
} 
b 
vararr = [1,2,3,4,5]; 
func(arr,2); 


console.log(arr); I/[1,3,4,5] 


练习 7: 编写 函数 ， 找 出 某 个 元 素 在 数组 中 的 位 置 ， 并 且 返 回 此 位 置 ， 如 果 没 有 找到 ， 
就 返回 -1。 


function func(arr,item){ 
for(vari= 0; i< arr.length; i++){ 
if(ar[i] = 一 item){ 
return i; 
} 
} 
return -1; 
b 
var arr =[1,2,3,4,5]; 
console.log(func(arr,3)); 从 
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练习 8: 编写 函数 ， 将 使 用 “-” 进 行 分 割 的 字符 串 转 换 为 驼峰 风格 ， 例 如 hello-world 转 
换 成 helloWorld。 
解析 : 


function func(str){ 
var arr=str. split("-"); 
for(var i=1;i<arr.length;i++){ 
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substring(1); 
9 


str=arr.join(™"); 
Teturn str; 
} 
console.log(func("hello-world-js")); /helloWorldJs 


练习 9: 尝试 编写 一 个 函数 ， 计 算 未 来 的 某 一 天 距离 今天 还 剩 多 少 天 。 
解析 : 


function func(date){ 
var today = new Date(); 
var l= date.getTime() - today.getTime(); 
return Math.floor(l/1000/60/60/24); 


} 
console.log(func(new Date(2020,2,27))); 
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通过 本 书 前 几 章 的 学 习 ， 相 信 你 已 经 对 JavaScript 的 核心 语法 ( ECMAScript ) 有 了 一 定 
的 了 解 和 使 用 能 力 , 解决 常见 的 编程 问题 应 该 已 经 不 在 话 下 了 。 本 章 进一步 学 习 ECMAScript 
的 高 级 特性 ， 这 些 功 能 与 开发 技巧 可 以 让 你 的 编程 体验 更 加 轻松 畅快 。 


5-1 数组 的 解构 赋值 


解构 赋值 是 ES6 ( ECMAScript 6 ) 中 一 个 十 分 强大 的 特性 。 掌 握 了 这 种 技术 ， 你 将 能 十 
分 轻松 地 从 数组 、 对 象 等 结构 中 提取 所 需要 的 数据 。 通俗 地 理解 ,解构 赋值 就 是 分 解数 据 的 
结构 来 为 变量 赋值 。 这 种 语法 特性 广泛 应 用 于 数组 的 分 解 、 对 象 的 分 解 、 字 符 串 的 分 解 、 函 
数 参数 的 分 解 等 。 

你 一 定 还 记得 , 数组 实际 上 是 一 种 特殊 的 对 象 , 其 属性 名 是 递增 的 整数 。 如 果 我 们 要 从 
数组 中 取 值 ， 通 常会 采用 如 下 方式 : 

let students = ["Jaki","Lucy","Mery","July"]:; 

W 取 数组 中 第 1 个 元 素 
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let stul = students[0]; /Jaki 
/ 取 数 组 中 第 2 个 元 素 
let stu2 = students["1"]; /Lucy 


如 果 我 们 需要 把 数组 中 所 有 的 值 都 提取 到 对 应 的 变量 中 , 上 面 的 方法 是 十 分 麻烦 的 , 需 
要 手动 地 声明 每 个 变量 ， 并 对 其 进行 赋值 。 如 果 使 用 解构 赋值 技术 ， 问 题 将 变 得 十 分 简单 ， 
示例 如 下 : 


/进行 数组 的 解构 赋值 
let [a,b,c,d] = students; 
console.log(at+" "+b+" "+c+" "+d); //Jaki Lucy Mery July 


上 面 的 代码 将 数组 中 的 值 按 顺序 提取 到 了 a、b、c、d 变 量 中 。 需 要 注意 ,解构 赋值 前 面 
的 let 关 键 字 和 正常 的 变量 声明 意义 一 致 ， 因 此 如 果 解 构 赋值 中 新 声明 的 变量 在 前 面 有 声明 
过 ,程序 就 会 抛 出 异常 ( 当然 用 var 关 键 字 不 会 有 这 个 问题 ) 。 上 面 的 示例 代码 students 数 组 
中 有 4 个 元 素 , 进行 解构 赋值 的 表达 式 中 也 声明 了 4 个 变量 , 数组 中 的 元 素 刚好 可 以 和 解构 赋 
值 表达 式 中 的 变量 一 一 对 应 ， 这 种 解构 赋值 的 场景 叫 作 完 全 解构 。 与 其 相对 ， 如 果 解 构 赋 值 
表达 式 中 声明 的 变量 与 数组 中 的 元 素 个 数 并 不 一 一 对 应 ， 就 会 产生 不 完全 解构 ， 示 例如 下 : 

/不 完全 解构 

/只 提取 数组 中 的 前 三 个 数据 

let [e,f,g] = students; 

console.log(et+" "+f+" "+g); //Jaki Lucy Mery 

/只 提取 数组 中 的 第 4 个 数据 

let [,,,h] = students; 

console.log(h); /July 

/提取 数组 中 的 第 1 个 值 ， 并 将 其 余 值 放 入 另 一 个 数组 

let [i,...j] = students; 


console.log(i+" "+j); //Jaki [Lucy,Mery,July] 

/溢出 的 变量 将 被 赋值 为 undefined 

let [k,l,m,n,0] = students; 

console.log(k+" "+HH' "+m+" "+n+" "+0); //Jaki Lucy Mery July undefined 


数组 的 解构 赋值 也 支持 进行 嵌 套 ， 只 要 解构 表达 式 的 嵌 套 结构 与 数组 的 谋 套 结构 一 致 ， 
就 可 以 解构 赋值 成 功 ， 例 如 : 

/解构 赋值 的 嵌 套 

let array = [1,2,[5,6,7]]; 

let [p,q,[r,s,t]] = array; 

console.log(""+pt+q+rt+stt); //12567 
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如 果 解 构 表达 式 声明 的 变量 有 溢出 ， 就 会 解构 失败 ， 解 构 失 败 的 变量 将 默认 被 赋值 为 
undefined。 在 解构 表达 式 中 ， 你 也 可 以 为 变量 设置 一 个 默认 值 ， 当 解构 失败 或 者 解构 出 的 值 
为 undefined 时 ， 此 变量 会 采用 设置 的 默认 值 作 为 自己 的 值 ， 示 例如 下 : 


/设置 默认 值 
let [u=0,v=0,w=0] = [1,undefined]; 
console.log(u+" "+v+" "+w); /100 


需要 注意 , 必须 解构 失败 或 者 解构 出 的 值 严 格 为 undefined 时 , 变量 才 会 采用 默认 值 , 其 
他 解构 出 的 如 null、false、NaN 等 都 不 会 触发 变量 默认 值 ， 例 如 : 


[u=0,v=0,w=0] = [1,NaN,null]; 
console.log(ut" "+v+t" "+w); /1 NaN null 


如 上 面 的 代码 所 示 , 其 实在 进行 解构 赋值 时 ,并 不 一 定 要 声明 新 的 变量 , 也 可 以 将 数组 
中 的 数据 解构 赋值 到 已 经 存在 的 变量 中 。 但 是 需要 注意 ， 如 果 是 对 象 的 解构 赋值 ,就 必须 将 
解构 赋值 表达 式 放 入 小 括号 中 ， 后 面 会 具体 介绍 。 


5-2 对象 的 解构 赋值 


和 数组 的 解构 赋值 类 似 , 对 象 也 可 以 进行 解构 赋值 。 使 用 对 象 的 解构 赋值 可 以 方便 地 提 
取 对 象 的 属性 ， 例 如 : 


/对 象 的 解构 赋值 
let teacher = { 
name:"Jaki", 
age:25, 
teaching:function() { 
console.log("teaching..."); 
} 
由 
let {name,age,teaching} = teacher; 
console.log(name+" "+age); //jaki 25 
teaching(); //teaching... 


对 象 中 的 属性 是 没有 先后 顺序 之 分 的 , 因此 在 对 对 象 进行 解构 赋值 时 , 赋值 的 变量 名 必 
须 和 对 象 中 的 属性 名 完全 一 致 ， 否 则 会 解构 失败 。 如 果 要 自 定义 解构 赋值 的 变量 名 ， 可 以 采 
用 如 下 映射 方式 : 


135 


现代 JavaScript 编程 : 经 典范 例 与 实践 技巧 


let {name:myName,age:myAge} = teacher; 
console.log(myName+" "+myAge); //jaki 25 


其 实 对 象 的 解构 赋值 的 默认 结构 是 这 样 的 : 
let {name:name,age:age} = teacher; 


当 要 解构 赋值 的 变量 名 与 对 象 的 属性 名 相同 时 ,可 以 省 略 映射 结构 。 数 组 也 是 对 象 , 因 
此 可 以 使 用 如 下 方式 对 数组 进行 解构 : 


let {0:x,1:y} = [1,2]; 
console.log(x+" "+y); MI 过 


对 象 的 解构 赋值 也 是 支持 嵌 套 的 ， 这 在 处 理 复杂 对 象 时 十 分 高 效 ， 例 如 : 


let teacher = { 
name:"Jaki", 
age:25, 
students:[ 
{ 


name:"Lucy", 


age:24 

» 

{ 
name:"July", 
age:26 

} 


]， 
teaching:functionO){ 
console.log("teaching..."); 
} 
要 
let {students:[{name:namel}, {name:name2}]} = teacher; 
console.log(namel+" "+name2); /lLucy July 


如 果 是 将 对 象 解构 赋值 到 已 有 的 变量 中 , 解构 赋值 表达 式 就 必须 放 在 小 括号 内 , 否则 会 
抛 出 异常 , 原因 是 JavaScript 解 释 器 会 将 大 括号 解析 为 代码 块 而 不 是 表达 式 , 例如 下 面 的 写法 
是 正确 的 : 

({name:name,age:age} = teacher); 

在 对 象 解构 赋值 时 , 也 可 以 为 变量 添加 默认 值 , 如 前 面 所 说 , 只 有 当 解 构 失败 或 者 解构 
出 的 值 为 严格 的 undefined 时 ， 才 会 触发 默认 值 。 
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5-3 ”字符 串 与 函数 参数 的 解构 赋值 


在 进行 字符 串 的 解构 赋值 时 ， 可 以 将 字符 串 理解 为 一 个 字符 数组 ， 示 例如 下 : 


let [cl,c2,c3,c4,c5] = "Hello"; 
console.log(cl+c2+c3+c4+c5); //Hello 


这 种 解构 赋值 常用 于 提取 字符 串 中 某 个 位 置 的 字符 。 在 ES6 中 ,函数 的 参数 也 可 以 进行 
解构 赋值 ， 在 ES5 标 准 中 ， 如 果 你 需要 向 函数 中 传递 数组 或 对 象 ， 通 常 要 这 样 做 : 


let people= { 
name:"Jaki", 
age:25 
要 
function print(people)!{ 
console.log(people.name+":"+people.age); 
}; 
print(people); /Jaki:25 
使 用 解构 赋值 的 方式 可 以 这 样 写 : 


let people= { 
name:"Jaki", 
age:25 
上 
function print({name,age}){ 
console.log(name+":"+age); 
和 
print(people); /Jaki:25 
同样 ,你 也 可 以 为 函数 的 参数 在 解构 赋值 时 设置 一 个 默认 值 。 需要 特别 注意 , 为 函数 参 
数 解构 赋值 设置 默认 值 和 设置 函数 参数 的 默认 值 是 完全 不 同 的 ， 请 看 如 下 示例 : 


function print({name="name",age=0}={name:"Jaki",age:25}){ 
console.log(namet+":"+age); 


; 
print({}); /name:0 
printO; /Jaki:25 
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上 面 的 示例 代码 中 ， 如 果 解 构 赋值 失败 或 者 解构 为 undefined， 参 数 name 会 采用 默认 值 
“name”， 参 数 age 会 采用 默认 值 0。 但 是 如 果 调 用 函数 时 不 传 入 参数 ， 就 会 采用 参数 对 象 的 
默认 值 ， 即 fname:"jaki",age:25} 对 象 ， 为 函数 的 参数 设置 默认 值 也 是 ES6 的 特性 之 一 。 


5-4 用 解构 赋值 交换 变量 的 值 


交换 两 个 变量 的 值 最 少 需要 几 步 ?你 可 能 会 不 假 思 索 地 写 出 如 下 代码 : 
let v1=10; 

let v2=11; 

let v3 = v1; 

v1 = v2; 

V2= v3; 

console.log(v1); 

console.log(v2); 


上 面 的 代码 需要 创建 中 间 变 量 ， 并 且 需 要 至 少 3 步 才能 完成 两 个 变量 值 的 交换 ， 如 果 使 
用 解构 赋值 技术 ， 不 仅 可 以 省 略 中 间 变 量 ， 而 且 一 步 即 可 完成 : 

let v1=10; 

let v2=11; 

[v1,v2] = [v2,v1]; 

console.log(v1); 

console.log(v2); 


5-5 ”箭头 函数 的 基本 用 法 


箭头 函数 是 ES6 中 新 引入 的 一 种 创建 函数 的 语法 规则 。 这 种 语法 可 以 很 大 程度 地 简化 函 
数 编写 的 格式 ， 并 且 会 对 函数 中 的 this 指 向 进行 绑 定 。 

你 一 定 还 记得 ， 前 面 我 们 介绍 过 好 几 种 在 ECMAScript 中 创建 函数 的 方法 ， 虽 然 几 种 创 
建 函数 的 方法 都 有 差别 ， 但 其 在 格式 上 大 同 小 异 ， 用 法 也 基本 上 一 致 ， 例 如 : 


function exp(a){ 
return a*a; 
} 


138 


第 5 章 ECMAScript 的 高 级 特性 


let res = exp(5); 

console.log(res); 

如 果 使 用 箭头 函数 语法 对 上 面 的 函数 进行 重 写 ， 结 果 如 下 : 

letf=(a)=>{ 

return a*a; 

} 

let res = f(5); 

console.log(res); 

箭头 函数 的 基本 语法 格式 为 : (参数 列表 )=>{ 函 数 体 }。 如 果 箭头 函数 只 有 一 个 参数 ， 并 
且 函 数 体 中 只 有 一 行 代码 ， 我 们 可 以 再 进行 简化 ， 示 例如 下 : 

letf = a=>a*a; 

let res = f(5); 

console.log(res); 

看 到 如 此 简洁 的 函数 定义 ， 是 不 是 有 了 眼前 一 亮 的 感觉 呢 ! 

需要 注意 , 如 果 箭 头 函 数 的 函数 体 只 有 一 句 代码 , 并 且 其 返回 的 是 一 个 对 象 , 需要 将 对 
象 包 庄 在 小 括号 内 ， 这 是 因为 大 括号 默认 会 被 解释 为 代码 块 ， 示 例如 下 : 

let func = ()=>({name:"Jaki"}); 

箭头 函数 在 用 法 上 , 和 我 们 前 边 介绍 的 普通 函数 并 没有 太 大 的 差异 , 同样 它 也 支持 函数 
参数 的 解构 赋值 ， 示 例如 下 : 

let func = ({name,age})=>console.log(name,age); 

func( {name:"Jaki",age:25}); //Jaki 25 


箭头 函数 这 种 简洁 的 结构 十 分 适用 于 回调 函数 的 编写 , 在 实际 发 开发 中 , 我 们 也 会 经 常 
使 用 箭头 函数 。 


5-6 ”箭头 函数 中 this 的 固化 


箭头 函数 有 一 个 十 分 重要 的 特点 ,其 中 this 是 被 固化 的 。 在 普通 函数 中 , this 默 认 指 向 调 
用 函数 的 对 象 ， 当 然 也 可 以 使 用 call 、apply 、bind 这 些 函 数 进行 this 指 向 的 更 改 。 但 是 在 箭头 
函数 中 ，this 是 被 固化 的 ， 也 就 是 说 ， 其 中 的 this 在 定义 函数 时 就 已 经 被 绑 定 ， 不 能 修改 , 也 
和 调用 者 无 关 。 比 较 下 面 两 段 代 码 。 

普通 函数 : 
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let teacher = { 
name:"Jaki", 
age:25, 
print:function(){ 
console.log(this.name,this.age); 


} 
let student = { 
name:"Lucy", 
age:24, 
print:teacher.print 
} 
teacher.print(); //Jaki 25 
student.print(); /Lucy 24 


/箭头 函数 this 的 固化 


let teacher = { 
name:"Jaki", 
age:25, 
printO=>{ 
console.log(this.name,this.age); 














} 
let student = { 
name:"Lucy", 


age:24, 

print:teacher. print 
teacher.print(); //undefined undefined 
student.print(); Wundefined undefined 


可 以 发 现 ， 在 箭头 函数 中 ，this 实 际 上 并 非 指 向 teacher 对 象 或 者 student 对 象 ， 而 是 指向 
全 局 对 象 。 即 箭头 函数 内 部 的 this 就 是 定义 时 所 在 环境 的 this 指 向 , 并 且 会 被 固化 , 不 能 修改 。 
再 来 看 下 面 这 个 例子 : 
function foo(){ 
this.name = "foo" 
this.inline = ()=>{ 
console.log(this.name); 


1 
3 
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Bs 
this.outline = function(){ 
console.log(this.name); 


} 
} 
let obj = new foo(); 
obj.inline(); //foo 
obj.inline.call( {name:"Jaki"}); //foo 
obj.outline(); //foo 
obj.outline.call( {name:"Jaki"}); //Jaki 


从 上 面 的 代码 可 以 看 出 , 篆 头 函数 在 定义 时 ,其 中 的 this 就 固化 称 为 foo 函 数 当前 环境 中 
的 this， 无 论调 用 方 如 何 修改 ， 这 个 this 指 向 都 不 变 。 为 了 简单 理解 ， 我 们 可 以 将 箭头 函数 中 
的 this 解 析 如 下 : 


function fooO){ 
let this = this; 
this.name = "foo"; 
this.inline = (=>{ 
console.log(_this.name); 
}; 
this.outline = function0){ 
console.log(this.name); 
} 
b 


由 于 箭头 函数 this 固 化 的 特性 ， 因 此 不 能 将 箭头 函数 作为 构造 函数 来 使 用 ， 即 不 可 以 使 
用 new 关 键 字 来 调用 箭头 函数 。 

需要 注意 ， 定 义 的 全 局 对 象 中 ， 箭 头 函 数 中 的 this 之 所 以 指向 全 局 对 象 ， 是 因为 对 象 可 
以 理解 为 是 全 局 对 象 调用 Object 构造 函数 创建 的 , 这 个 函数 中 的 this 当 然 指 向 其 调用 方 全 局 对 
象 ， 因 此 箭头 函数 中 的 this 固 化 成 了 全 局 对 象 。 


5-7 Set 集合 结构 


Set 是 一 种 集合 结构 ， 人 允许 存储 任意 类 型 数据 的 唯一 值 。 所 谓 唯一 值 ， 是 指 所 存储 的 值 
不 能 重复 。 构 造 一 个 Set 集 合 对 象 示例 如 下 : 
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/创建 Set 集合 
let set = new Set([1,2,3,4,4,2]); 
console.log(set); l/Set { 1,2, 3,4} 


Set 构 造 函 数 中 可 以 传 入 一 个 数组 对 象 ,数组 中 的 值 会 被 作为 Set 集 合 的 元 素 插入 集合 中 。 


需要 注意 ， 数 组 中 的 元 素 如 果 有 重复 ， 就 会 自动 被 剔除 ， 最 终生 成 的 Set 集 合 中 的 元 素 都 是 


唯一 


的 。Set 集 合 的 这 种 特性 也 可 以 作为 一 种 数组 去 重 的 好 方法 -Set 实例 对 象 的 size 属 性 可 以 


获取 集合 中 元 素 的 个 数 ， 示 例如 下 : 
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let set = new Set([1,2,3,4,4,2]); 
console.log(set.size); /4 


关于 Set 实 例 对 象 中 元 素 的 操作 ， 可 以 使 用 如 下 示例 方法 : 


let set = new Set(); 

/向 集合 中 插入 元 素 

set.add("Jaki"); 

set.add("Lucy"); 

console.log(set); //Set { 'Jaki',Lucy' } 


/删除 集合 中 的 某 个 元 素 
set.delete("Jaki"); 

console.log(set); /Set {'Lucy'} 
/删除 集合 中 所 有 元 素 

set.clear(); 

console.log(set); /Set {} 


set.add("Jaki"); 

set.add("Lucy"); 

/返回 Set 集合 迭代 器 对 象 

console.log(set.entries()); //Setlterator { [ "Jaki', ‘Jaki’ ], [ ‘Lucy’, 'Lucy’ ] } 

/让 集合 中 的 所 有 元 素 调用 一 次 回调 方法 

/本 

将 打印 

Jaki 

Lucy 

set.forEach((element)=>{ 
console.log(element); 

},set); 
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/判断 集合 中 是 否 包含 某 个 元 素 

console.log(set.has("Jaki")); /ltrue 

/下 面 这 两 个 方法 都 是 用 来 获取 集合 中 所 有 元 素 的 迭代 器 
console.log(set.keys()); //Setlterator { "Jaki', Lucy’ } 
console.log(set.values()); //SetIterator { "Jaki', Lucy } 


上 面 代码 中 的 注释 十 分 详尽 ，Set 实 例 对 象 中 的 forEach 方 法 与 Array 实 例 对 象 的 forEach 
方法 行为 基本 一 致 ,都 是 将 其 中 的 元 素 遍历 一 遍 , 对 每 个 元 素 执行 传 入 的 回调 方法 ，forEach 
函数 的 第 2 个 参数 传 入 的 对 象 会 被 绑 定 到 回调 函数 中 的 this 上 。Set 集 合 可 以 使 用 forof 结 构 进 
行 迭 代 ， 示 例如 下 : 

ee 

Jaki 

Lucy 

eh 

for(item of set){ 


console.log(item); 


} 


对 象 属性 的 过 历 使 用 的 是 for-in 结 构 , Set 元 素 的 过 历 使 用 的 是 for-of 结 构 , 切记 不 要 混淆 。 
ES6 中 还 定义 了 一 种 特殊 的 Set 集 合 : WeakSet。 正如 其 名 ， 它 是 一 种 弱 引 用 集合 。 与 Set 
集合 相 比 ， 它 有 两 个 特点 : 


(1) WeakSet 中 只 能 存放 引用 数据 ， 即 对 象 数据 ， 不 能 存放 原始 值 。 
(2 ) WeakSet 中 的 对 象 元 素 都 是 弱 引 用 的 ， 因 此 其 无 法 进行 枚 举 。 


WeakSet 实 例 对 象 中 提供 的 方法 如 下 : 


let objl = {name:"Jaki"}; 

let obj2 = {name:"Lucy"}; 

let wSet = new WeakSet([obj1]); 

/ 弱 引 用 集合 中 是 否 包含 某 个 元 素 
console.log(wSet.has(obj1)); //true 
// 添 加 一 个 元 素 

wSet.add(obj2); 

/删除 一 个 元 素 

wSet.delete(obj1); 


弱 引用 是 指 , 除了 集合 之 外 , 若 没有 其 他 变量 或 属性 引用 这 个 对 象 , 则 这 个 对 象 值 会 被 
垃圾 回收 机 制 回收 掉 ， 集 合 中 的 这 个 元 素 也 将 无 效 。 
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5-8 Map 字典 结构 


你 一 定 有 过 查 字 典 的 经 历 。 以 汉语 字典 为 例 , 当 你 需要 查找 某 个 字 的 释义 时 ,需要 先 在 
字典 的 索引 中 找到 这 个 字 ， 然 后 根据 索引 提供 的 页 标 来 找到 这 个 字 的 释义 。 在 字典 结构 中 ， 
我 们 常常 把 这 个 “索引 字 ” 称 为 键 ， 把 “释义 ” 称 为 值 。 

许多 编程 语言 中 都 有 字典 数据 结构 , 在 ES6 标 准 前 , ECMAScript 中 的 对 象 可 以 充当 字典 
来 使 用 ， 但 是 对 象 的 属性 不 能 是 任意 类 型 的 值 ， 在 ES6 标 准 中 引入 了 Map 数 据 结构 。Map 就 
是 简单 的 键 值 映 射 ， 其 中 键 和 值 都 可 以 是 任意 值 。 和 Set 数 据 结 构 相 似 的 是 ，Map 中 的 键 也 都 
是 唯一 的 〈 不 同 键 的 值 可 以 相同 ) 。 

Map 实 例 对 象 中 的 size 属 性 可 以 获取 其 中 键 值 对 的 个 数 ( 去 重 后 ) ， 代 码 如 下 : 


/Map 字典 
let map = new Map([["name","Jaki"],["age",25],[321,true],[321,true]]); 
console.log(map.size); /3 


下 面 列 出 了 一 些 常 用 的 操作 Map 实 例 对 象 的 方法 : 
let map = new Map(); 

/向 Map 实例 对 象 中 添加 键 值 对 
map.set("name","Jaki"); 

map.set("age",25); 


map.set(123,true); 

console.log(map); /Map { name' => 'Jaki', 'age' => 25, 123 => true } 
/删除 一 对 键 什 

map.delete(123); 

console.log(map); //Map { name' => 'Jaki', 'age' => 25 } 
/返回 一 个 Map 和 迭代 对 象 

console.log(map.entries()); //Maplterator { ['name', "Jaki' ], [ 'age', 25 ] } 
// 判 断 Map 实例 对 象 中 是 否 包含 某 个 键 

console.log(map.has("name")); /ltrue 

/获取 Map 中 某 个 键 的 值 ， 如 果 键 不 存在 ， 就 会 返回 undefined 
console.log(map.get("name")); /Jaki 

/获取 Map 中 的 所 有 键 

console.log(map.keys()); //Maplterator { ‘name', 'age' } 

/获取 Map 中 的 所 有 值 

console.log(map.values()); //Maplterator { 'Jaki', 25 } 

让 
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将 打印 

name Jaki 

age 25 

map.forEach((value,key)=>{ 
console.log(key,value); 

},map); 

// 清 空 Map 中 所 有 键 值 

map.clear(); 

console.log(map); 


Map 实 例 对 象 调用 forEach 方 法 来 对 自身 进行 过 历 , 并 对 每 个 键 值 对 执行 回调 方法 , 回调 
函数 中 ， 第 1 个 参数 为 当前 键 值 对 的 键 ， 第 2 个 参数 为 当前 键 值 对 的 值 。 
Map 数 据 结 构 也 可 以 使 用 for-of 结 构 来 进行 遍历 ， 示 例如 下 : 


让 

name Jaki 

age 25 

i 

for(let [a,b] of map){ 
console.log(a,b); 


} 


与 WeakSet 相 对 应 ，ES6 中 也 定义 了 一 个 WeakMap。WeakMap 是 一 种 特殊 的 Map。 其 中 
所 有 的 键 只 能 是 引用 类 型 ( 即 对 象 ) , 值 可 以 是 任意 类 型 。 并 且 其 对 所 有 对 象 键 的 引用 都 是 
弱 引 用 。 因 此 ，WeakMap 也 是 不 可 以 枚 举 的 。WeakMap 实 例 对 象 可 用 方法 列举 如 下 : 


let wMap = new WeakMap(); 
let obj={ 

name:"Jaki" 
} 
// 添 加 键 值 对 
wMap.set(obj,true); 
// 判 断 某 个 键 是 否 存在 
console.log(wMap.has(obj)); /lltrue 
/获取 某 个 键 的 值 
console.log(wMap.get(obj)); /ltrue 
/删除 一 组 键 值 对 
WwWMap.delete(obj); 
console.log(wMap.has(obj)); //false 
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5-9 使 用 Proxy 代理 对 对 象 的 属性 读 写 进行 拦截 


ES6 标 准 中 定义 了 Proxy 对 象 ， 从 字面 理解 ， 它 是 一 种 “代理 ”对 象 。Proxy 提 供 了 一 种 
途径 ， 人 允许 开发 者 对 已 经 存在 的 对 象 行为 进行 拦截 与 修改 。 
首先 创建 一 个 对 象 ， 点 语法 可 以 轻松 地 访问 对 象 的 属性 ， 例 如 : 
let teacher = { 
name:"Jaki", 
age:25, 
teaching:function(){ 
console.log("teaching"); 
} 
} 


console.log(teacher.name); aki 
下 面 我 们 使 用 Proxy 对 teacher 对 象 属性 的 访问 进行 拦截 : 


let proxy_teacher = new Proxy(teacher,{ 
set:(target,key,value,receiver)=>{ 
console.log(" 添 加 属性 :",key); 
target[key] = value; 
} 
get:(target,key,receiver)=>{ 
console.log(" 获 取 属 性 :",key); 


return target[key]; 
} 
D; 
a 
将 打印 
获取 属性 : name 
Jaki 


添加 属性 : subject 

获取 属性 : subject 

JavaScript 
console.log(proxy_teacher.name); 
Pproxy_teacher.subject = "JavaScript"; 
console.log(proxy_teacher.subject); 
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Proxy 构 造 函 数 中 需要 传 入 两 个 参数 ， 第 1 个 参数 为 要 代理 的 对 象 ， 第 2 个 参数 也 是 一 个 
对 象 , 其 中 需要 定义 要 拦截 或 修改 行为 的 方法 , 我 们 通常 也 会 把 它 称 为 处 理 器 对 象 。 在 对 代 
理 对 象 的 某 个 属性 赋值 时 ,会 触发 处 理 器 中 的 set 方 法 ， 这 个 方法 中 前 3 个 参数 分 别 表示 原 对 
象 、 被 赋值 的 属性 名 、 所 附 的 值 。 在 读 取代 理 对 象 的 某 个 属性 时 会 触发 处 理 器 中 的 get 方 法 ， 
这 个 方法 中 的 前 两 个 参数 分 别 表示 原 对 象 和 要 访问 的 属性 名 。 

需要 注意 ， 要 使 拦截 方法 起 作用 ， 必 须 使 用 Proxy 代 理 对 象 ， 原 对 象 的 属性 访问 操作 并 
不 会 触发 代理 对 象 的 处 理 器 方法 。Proxy 代 理 本 身 也 是 一 种 对 象 ， 对 象 可 以 通过 原型 链 的 方 
式 来 实现 方法 的 继承 , 因此 我 们 可 以 将 Proxy 代 理 作为 对 象 的 原型 来 实现 未 定义 属性 的 拦截 ， 
示例 如 下 : 


var proxy_normal = new Proxy({}, { 
get: function(target, property) { 
console.log("warning:this property is undefined"); 
return undefined; 

}, 

D); 

let obj = Object.create(proxy_normal); 

obj.time; //warning:this property is undefined 


5-10 ”Proxy 代理 处 理 器 支持 的 拦截 操作 


上 一 示例 我 们 演示 了 对 属性 读 和 写 的 拦截 操作 ， 分 别 在 处 理 器 中 定义 get 和 set 方 法 即 可 。 
处 理 器 支持 的 拦截 操作 不 止 如 此 ， 下 面 的 示例 代码 列 出 了 处 理 器 对 象 中 可 以 定义 的 拦截 方法 : 


let teacher = { 
name:"Jaki", 
age:25, 
teaching:function() { 
console.log("teaching"); 


} 

} 

let proxy_teacher = new Proxy(teacher,{ 
// 添 加 属性 时 会 触发 


set:(target,key,value,receiver)=>{ 
console.log(" 添 加 属性 :",key); 
target[key] = value; 
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/获取 属性 时 会 触发 

get:(target,key,receiver)=>{ 
console.log(" 获 取 属性 :",key); 
return target[key]; 

} 

// 判 断 对 象 中 是 否 包含 某 个 属性 时 触发 

has:(target,key)=>{ 
console.log(" 检 查 属性 :",key); 
return key in target; 

入 

/删除 对 象 属性 时 触发 

deleteProperty:(target,key)=>{ 
console.log(" 删 除 属性 :",key); 
delete target[key]; 

}, 


/拦截 getOwnPropertyNames0 和 keys() 方 法 


ownKeys:(target)=>{ 
console.log(" 获 取 所 有 自身 属性 "); 


return Object.getOwnPropertyNames(target); 


}, 


/拦截 defineProperty0 和 definePropertys() 方 法 


defineProperty:(target,key,desc)=>{ 
console.log(" 定 义 属性 :",key); 


return Object.defineProperty(target,key,desc); 


上 

/拦截 preventExtensions() 方 法 

preventExtensions:(target)=>{ 
console.log(" 抑 制 可 扩展 性 "); 


return Object.preventExtensions(target); 


上 

/拦截 getPrototypeOf0) 方 法 

getPrototypeOf:(target)=>{ 
console.log(" 获 取 对 象 原型 "); 
return Object.getPrototypeOf(target); 

上 ， 

/拦截 isExtensible() 方 法 

isExtensible:(target)=>{ 
console.log(" 获 取 对 象 可 扩展 性 "); 
return Object.isExtensible(target); 
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} 
// 拦 截 setPrototypeOf) 方 法 
setPrototypeOf:(target,proto)=>{ 
console.log(" 设 置 对 象 原型 "); 
return Object.setPrototypeOf(target,proto); 
}; 
// 拦 截 call0 和 apply 方法 ， 用 于 函数 对 象 
apply:(target,object,arguments)=>{ 
console.log(" 拦 截 call、apply 方法 "); 
target.apply(objecbarguments): 


小 
/拦截 构造 函数 方法 
construct:(target,arguments)=>{ 
return {}; 
1 
D); 
console.log("name" in proxy_teacher); // 检 查 属性 : name true 


delete proxy_teacher.name // 删 除 属性 : name 
console.log(Object.getOwnPropertyNames(proxy_teacher)); /获取 所 有 自身 属性 [ 'name'，'age', 
‘teaching’ ] 
Object.defineProperty(proxy_teacher,"name",{ 
value:"Jaki", 
writable:true, 
configruable:true 
》; /定义 属性 : name 
// Object.preventExtensions(proxy_teacher); /抑制 可 扩展 性 
Object.getPrototypeOf(proxy_teacher); // 获 取 对 象 原 型 
Object.isExtensible(proxy_teacher); // 获 取 对 象 可 扩展 性 
Object.setPrototypeOf(proxy_teacher, {sex:" 男 "}); /设置 对 象 原型 
需要 注意 ,in 是 前 面 没有 专门 提 到 的 一 个 运算 符 , 使 用 它 可 以 获取 对 象 中 是 否 包 含 某 个 
属性 。 
关于 使 用 Proxy 来 代理 目标 对 象 ， 有 一 点 需要 额外 注意 ，Proxy 对 象 方法 中 的 this 和 原 对 
象 方法 中 的 this 并 不 一 致 ， 它 们 指向 的 是 两 个 不 同 的 对 象 ， 例 如 : 
var student = { 
name:"Lucy", 
print:function(){ 


console.log(this===student); 


} 
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} 

let proxy_student = new Proxy(student,{}); 
student.print(); /lltrue 
proxy_student.print(); //false 


5-11 ”使 用 Promise 承诺 对 象 


Promise 为 ECMAScript 异 步 编程 提供 了 一 种 实现 思路 。 比 如 某 个 延 时 任务 ， 我 们 可 以 把 
它 交 给 Promise 对 象 ， 这 样 既 不 会 阻塞 程序 的 正常 执行 ， 当 延 时 任务 执行 完成 后 ， 我 们 又 可 
以 第 一 时 间 做 迪 辑 处 理 。 代 码 示 例如 下 : 

/打印 结果 

让 

go0... 

任务 直接 完成 

ny 

let promise = new Promise(function(resolve,reject){ 

setTimeout(()=>{ 
console.log(" 任 务 执行 完成 "); 
},3000); 

D); 

console.log("go..."); 

使 用 Promise 构 造 函 数 来 进行 Promise 实 例 对 象 的 创建 ， 构 造 函 数 中 需要 传 入 一 个 函数 作 
为 参数 ， 这 个 参数 函数 比较 特殊 ， 它 有 两 个 参数 ， 分 别 用 来 触发 Promise 实 例 对 象 的 任务 执 
行 完 成 消息 和 Promise 实 例 对 象 的 任务 执行 失败 消息 ， 后 面 会 具体 介绍 ， 参 数 函 数 的 函数 体 
就 是 Promise 实 例 对 象 需要 执行 的 任务 代码 。 从 上 面 的 打印 信息 可 以 看 出 ，Promise 实 例 对 象 
一 旦 被 创建 ， 其 中 的 任务 会 自动 开始 执行 ， 上 面 的 代码 做 了 延 时 3 秒 的 打印 操作 ， 并 没有 阻 
塞 主 程序 代码 的 执行 。 

其 实 Promise 实 例 对 象 有 3 种 状态 ,分 别 是 pending( 执行 中 )、fulfilled( 执行 完成 ) rejected 
(执行 失败 ) 。 这 3 种 状态 都 是 内 部 触发 的 ， 外 部 无 法 对 其 进行 操作 。 上 面 的 代码 并 没有 对 
Promise 任 务 执行 完成 情况 进行 监听 ， 在 实际 开发 中 ， 一 般 不 仅 需 要 得 到 Promise 任 务 执行 的 
情况 , 甚至 还 需要 获取 任务 执行 完成 后 的 一 些 数据 。Promise 实 例 对 象 的 then 方 法 用 来 监听 执 
行情 况 并 接收 传递 的 数据 。 请 看 如 下 代码 : 
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/打印 结果 
让 
go0... 
任务 直接 完成 
Success 
Sy 
let promise = new Promise(function(resolve,reject){ 
setTimeout(()=>{ 
console.log(" 任 务 执行 完成 "); 
resolve("Success"); 
},3000); 
D; 
promise.then((success)=>{ 
console.log(success); 
},(error)=>{ 
console.log(error); 
D; 
then 方 法 中 可 以 传 入 两 个 参数 , 第 1 个 参数 为 当 Promise 任 务 执行 完成 时 回调 的 方法 , 第 2 
个 参数 为 当 Promise 任 务 执行 失败 时 回调 的 方法 ,第 2 个 参数 为 非 必需 的 。 仅仅 对 Promise 的 执 
行情 况 进 行 监听 并 没有 意义 ， 我 们 还 需要 告诉 Promise 对 象 什么 情况 算 任务 执行 完成 ， 什 么 
情况 又 算 任务 执行 失败 。 在 创建 Promise 对 象 时 , 我 们 提 到 过 参数 函数 中 的 两 个 参数 : resolve 
和 和 reject。 这 两 个 参数 实际 上 也 是 函数 ， 我 们 只 需要 在 函数 体 合适 的 地 方 对 它们 进行 调用 即 
可 , 例如 上 面 的 代码 调用 了 resolve, 这 时 Promise 示 例 对 象 的 状态 被 置 为 已 完成 , 之 后 会 执行 
then 方 法 监听 的 已 完成 情况 下 的 回调 函数 。 
除了 then 方 法 外 , Promise 实 例 对 象 中 要 定义 一 个 catch 方 法 , catch 方 法 和 then 方 法 的 区 别 
只 在 于 catch 方 法 只 有 一 个 参数 ， 其 是 Promise 执 行 失 败 后 回调 的 函数 ， 例 如 : 


/打印 结果 
让 
go0... 
任务 直接 完成 
error 
A 
let promise = new Promise(function(resolve,reject){ 
setTimeout(()=>1{ 
console.log(" 任 务 直接 完成 "); 
reject("error"); 
},3000); 
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D; 
promise.catch((error)=>{ 
console.log(error); 


》; 
5-12 ”建立 Promise 任务 链 


在 开发 中 还 经 常会 遇 到 这 样 的 场景 ， 任 务 B 的 执行 必须 依赖 于 任务 A， 即 只 有 当 任务 A 
成 功 执行 后 ， 才 可 以 执行 任务 B。 使 用 Promise 可 以 十 分 容易 地 实现 这 种 迪 辑 ， 其 实 Promise 
实例 对 象 的 then 方 法 中 可 以 返回 一 个 新 的 Promise 来 构成 任务 链 ， 示 例 代码 如 下 : 


/打印 结果 
人 
ok 
任务 直接 完成 
success 
任务 2 执行 完成 
success2 
bt 
let promise = new Promise(function(resolve,reject){ 
setTimeout(()=>{ 
console.log(" 任 务 执行 完成 "); 
resolve("success"); 
},3000); 
D; 
promise.then((success)=>{ 
console.log(success); 
return new Promise((resolve,reject)=>{ 
setTimeout(()=>{ 
console.log(" 任 务 2 执行 完成 "); 
resolve("success2"); 
},2000) 
»; 
},(erron)—>{ 
console.log(error); 
}).then(success=>{ 
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console.log(success); 
D); 


console.log("go..."); 


使 用 这 种 任务 链 的 编程 模式 可 以 很 轻松 地 处 理 多 任务 并 且 有 复杂 依赖 关系 的 场景 
5-13 ”进行 Promise 对 象 组 合 


Promise 构 造 函 数 对 象 还 提供 了 两 个 非常 有 用 的 方法 ,它们 用 来 对 Promise 任 务 进行 组 合 ， 
all 方 法 用 来 组 合 一 组 Promise 实 例 对 象 ， 当 组 中 所 有 的 Promise 任 务 都 成 功 执行 完成 后 ， 
Promise 任 务 组 才 算 成 功 执行 ， 如果 其 中 有 一 个 任务 执行 失败 ， 任 务 组 就 会 执行 失败 ， 例 如 : 


let promisel = new Promise((resolve,reject)=>{ 
console.log(" 任 务 1 执行 成 功 "); 
resolve(); 

»); 

let promise2 = new Promise((resolve,reject)=>{ 
console.log(" 任 务 2 执行 成 功 "); 
resolve(); 

D; 

let promise3 = new Promise((resolve,reject)=>{ 
console.log(" 任 务 3 执行 成 功 "); 
resolve(); 

D); 

let promiseGroup = Promise.all([promise1,promise2,promise3]); 

让 

任务 1 执行 成 功 

任务 2 执行 成 功 

任务 3 执行 成 功 

任务 组 执行 成 功 

$] 

promiseGroup.then(success=>{ 
console.log(" 任 务 组 执行 成 功 "); 

},error=>{ 
console.log(" 任 务 组 执行 失败 "); 

D; 


如 果 我 们 将 任务 组 中 的 一 个 单独 任务 修改 为 执行 失败 ， 结 果 就 会 完全 不 同 ， 代 码 如 下 : 
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let promisel = new Promise((resolve,reject)=>{ 
console.log(" 任 务 1 执行 成 功 "); 


resolve(); 





D; 
let promise2 = new Promise((resolve,reject)=>{ 
console.log(" 任 务 2 执行 失败 "); 
rejectO; 
D; 
let promise3 = new Promise((resolve,reject)=>{ 
console.log(" 任 务 3 执行 成 功 "); 
resolve(); 
D; 
let promiseGroup = Promise.all([promise1,promise2,promise3]); 
让 
任务 1 执行 成 功 
任务 2 执行 失败 
任务 3 执行 成 功 
任务 组 执行 失败 
promiseGroup.then(success=>{ 
console.log(" 任 务 组 执行 成 功 "); 
},error=>{ 
console.log(" 任 务 组 执行 失败 "); 
D; 
与 al 方法 对 应 的 还 有 一 个 race 方 法 , 这 个 方法 也 是 组 合 一 组 Promise 实 例 对 象 , 不 同 的 是 
race 方 法 组 合 的 任务 组 中 只 要 有 一 个 任务 执行 完成 ， 任 务 组 就 算 执行 完成 ， 任 务 组 的 成 功 或 
失败 只 与 第 一 个 完成 的 任务 有 关 ， 第 一 个 完成 任务 的 Promise 对 象 状 态 如 果 为 成 功 ， 任 务 组 
的 状态 就 为 成 功 ， 此 对 象 的 状态 为 失败 ， 任 务 组 的 状态 就 为 失败 ， 例 如 : 


let promisel = new Promise((resolve,reject)=>{ 
/加 延 时 
setTimeout(O=>{ 
console.log(" 任 务 1 执行 成 功 "); 
resolve(); 
},1000); 


DD; 


let promise2 = new Promise((resolve,reject)=>{ 
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/加 延 时 
setTimeout(()=>{ 
console.log(" 任 务 2 执行 成 功 "); 
resolve(); 
},1000); 
D; 
let promise3 = new Promise((resolve,reject)=>{ 
console.log(" 任 务 3 执行 失败 "); 
reject(); 
D; 
let promiseGroup = Promise.race([promisel ,promise2,promise3]); 
让 
任务 3 执行 失败 
任务 组 执行 失败 
任务 1 执行 成 功 
任务 2 执行 成 功 
promiseGroup.then(success=>{ 
console.log(" 任 务 组 执行 成 功 "); 
},error=>{ 
console.log(" 任 务 组 执行 失败 "); 
D; 
Promise 构 造 函 数 对 象 的 all 方 法 返回 的 任务 组 的 成 功 和 失败 取决 于 其 中 每 一 个 任务 的 执 
行 。 Promise 构 造 函 数 对 象 的 race 方 法 返回 的 任务 组 的 成 功 和 失败 只 与 第 一 个 执行 完 的 任务 有 
关 ， 这 样 对 比 可 以 便于 记忆 。 


5-14 ”Generator 函数 应 用 


使 用 Promise 可 以 十 分 轻松 地 编写 链 式 任务 ， 在 ECMAScript 中 还 提供 了 一 种 强大 的 任务 
执行 控制 方案 : Generator 生 成 器 对 象 。 

从 字面 上 理解 ，Generator 是 一 种 生成 器 对 象 ， 这 种 理解 并 不 确切 ,但 也 没 错 。 一 种 更 加 
面向 应 用 的 理解 为 Generator 是 一 个 状态 机 , 其 内 部 封装 了 多 种 状态 , 通过 yield 语 句 进行 隔离 。 
使 用 Generator 函 数 分 步 处 理 任务 将 更 加 容易 。 

下 面 是 一 个 简单 的 Generator 函 数 例子 : 
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function* generatorFunc(){ 


console.log(" 任 务 一 "); 


yield; 
console.log(" 任 务 二 "); 
yield; 
console.log(" 任 务 三 "); 
return; 


h 

let g = generatorFunc(); 

lettl = g.next(); // 任 务 一 
let t2 = g.next(); 1/ 任务 二 
let t = g.nextO); /任务 三 
let t4 = g.next(); 


console.log(t1); //{ value: undefined, done: false } 
console.log(t2); //{ value: undefined, done: false } 
console.log(t3); //{ value: undefined, done: true } 
console.log(t4); //{ value: undefined, done: true } 


我 们 先 来 看 Generator 函 数 的 语法 ， 其 和 普通 函数 十 分 相似 ， 不 同 的 是 ， 在 function 关 键 
字 后 追加 一 个 星 号 ,表示 它 是 一 个 Generator 函 数 。 Generator 函 数 内 部 可 以 编写 一 些 迪 辑 代 码 ， 
和 普通 函数 不 同 ， 除 了 可 以 使 用 return 关 键 字 返 回 外 ， 还 可 以 使 用 yield 关 键 字 来 中 断 ( 普通 
函数 中 不 可 以 使 用 yield 关 键 字 ) 。Generator 函 数 的 调用 和 普通 函数 一 样 , 但 是 有 一 点 需要 特 
别 注意 , 调用 Generator 函 数 并 非 执 行 函 数 体 的 内 容 , 而 是 返回 一 个 欠 代 器 对 象 ， 通 过 这 个 迭 
代 器 对 象 的 next 指 针 来 分 步 执 行 Generator 函 数 体 中 的 任务 。 
以 上 面 的 代码 为 例 ，g 为 调用 Generator 函 数 返回 的 迭代 器 对 象 ， 当 迭代 器 对 象 第 一 次 调 
用 next 方 法 时 ,会 执行 Generator 函 数 体 的 代码 ， 直 到 遇 到 yield 语 句 处 中 断 。 第 2 次 再 调用 next 
方法 时 ，Generator 函 数 体 中 的 任务 会 从 上 次 中 断 的 地 方 开 始 继续 执行 ， 直 到 再 次 遇 到 yield 
中 断 或 者 return 返 回 。 当然, 调用 next 函 数 时 ,本 身 也 会 有 一 个 返回 值 ， 这 个 返回 值 是 一 个 对 
象 ， 其 中 的 done 属 性 如 果 为 false， 代 表 Generator 函 数 体 的 任务 还 没有 执行 完成 ， 可 以 继续 调 
用 next 往 后 执行 ， 如 果 done 属 性 为 ttue ， 则 表示 Generator 函 数 体 的 任务 已 经 完全 执行 完成 ， 
之 后 再 次 调用 next 方 法 将 不 会 有 效果 。 从 上 面 代码 的 打印 结果 也 可 以 看 到 ，next 函 数 返回 的 
对 象 中 还 有 一 个 value 属 性 ， 这 个 属性 用 于 接收 Generator 函 数 体 任务 执行 中 使 用 yield 或 者 
return 返 回 的 数据 ， 例 如 : 
function* generatorFuncO{ 
console.log(" 任 务 一 "); 
yield 1; 
console.log(" 任 务 二 "); 
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yield 2; 
console.log(" 任 务 三 "); 
return 3; 





} 

let g = generatorFunc(); 

let tl = g.next(); /任务 一 
let t2 = g.next(); // 任 务 二 
let t3 = g.next(); // 任 务 三 
let t4 = g.next(); 


console.log(t1); //{ value: 1, done: false } 
console.log(t2); //{ value: 2, done: false } 
console.log(t3); //{ value: 3, done: true } 
console.log(t4); //{ value: undefined, done: true } 


再 来 看 一 种 特殊 的 情况 ， 如 果 我 们 要 在 一 个 Generator 函 数 任务 中 执行 男 一 个 Generator 
函数 任务 ， 该 如 何 来 做 呢 ? 请 看 如 下 代码 : 


function* generatorSubFunc(){ 
console.log(" 子 任务 一 "); 
yield; 
console.log(" 子 任务 二 "); 
return; 

} 

function* generatorFunc(){ 
console.log(" 任 务 一 "); 
yield 1; 
console.log(" 任 务 二 "); 
let sub = generatorSubFunc(); 
sub.next(); 
sub.next(); 
yield 2; 
console.log(" 任 务 三 "); 
return 3; 

} 

let g = generatorFunc(); 

let tl = g.next(); /任务 一 

lett2 = g.next(); 1/ 任 务 二 子 任务 一 子 任务 二 

let t3 = g.next(); // 任 务 三 


上 面 的 示例 代码 提供 了 一 种 解决 方案 , 但 是 代码 结构 并 不 优美 ，ES6 中 提供 了 yield* 语 
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句 来 直接 在 Generator 函 数 体 内 部 执行 男 一 个 Generator 函 数 体 任务 ,修改 上 面 的 代码 如 下 : 


function* generatorSubFunc(){ 
console.log(" 子 任务 一 "); 
yield; 
console.log(" 子 任务 二 "); 
return; 

} 

function* generatorFuncO{ 
console.log(" 任 务 一 "); 
yield 1; 
console.log(" 任 务 二 "); 
yield* generatorSubFunc(); 
console.log(" 任 务 三 "); 
return 3; 

} 

let g = generatorFunc(); 

let tl = g.next(); // 任 务 一 

let t2 = g.next(); // 任 务 二 、 子 任务 一 、 子 任务 二 

let t3 = g.next(); // 任 务 三 


5-15 ”Generator 任务 参数 的 传递 


你 知道 通过 yield 或 return 语 句 可 以 得 到 Generator 函 数 每 一 步 任务 的 返回 值 ， 但 是 函数 有 
三 要 素 : 定义 域 、 值 域 、 表 达 式 。 对 应 编程 ， 其 实 就 是 参数 、 返 回 值 、 函 数 体 。 比 如 我 们 要 
实现 这 样 功 能 的 Generator 函 数 : 第 一 个 任务 先 传 入 两 个 参数 ， 计 算 其 和 ,然后 输出 结果 ; 第 
二 个 任务 再 计算 上 一 步 结果 的 平方 , 再 次 输出 , 最 后 一 个 任务 再 传 入 一 个 参数 , 计算 上 一 步 
结果 与 传 入 参数 的 差 ， 青 输出 。 其 实 我 们 在 调用 next 方 法 的 时 候 ， 可 以 传递 参数 ， 配 合 yield 
语句 来 接收 传递 的 参数 ， 示 例如 下 : 
function* cal|){ 
console.log(" 可 以 开始 计算 "); 
let a= yield; 
console.log(" 接 收 参数 a".a); 
let b= yield; 
console.log(" 接 收 参 数 b".b); 
let res = atb; 
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yield res; 
Tes = res*res; 
let d = yield res; 
console.log(" 接 收 参数 d",d); 
res=res-d; 
return res; 
} 
let ¢ = cal(); 
c.next(); 
c.next(5); 
console.log(c.next(3)); //{ value: 8, done: false } 
console.log(c.next()); //{ value: 64, done: false } 
console.log(c.next(10)); //{ value: 54, done: true } 


如 上 面 的 代码 所 示 ， 当 调用 next 函 数 的 时 候 ， 我 们 可 以 传 入 一 个 参数 ， 此 参数 会 作为 上 
一 个 任务 yield 表 达 式 的 值 ， 切 记 要 注意 ， 传 入 的 参数 会 作为 上 一 次 任务 的 yield 表 达 式 的 值 ， 
而 不 是 本 次 任务 yield 表 达 式 的 值 。 也 就 是 说 ， 第 一 次 调用 next 方 法 时 ， 实 际 上 是 不 能 传 入 参 
数 的 。 

当 Generator 函 数 作为 对 象 的 属性 时 ， 往 往 可 以 简写 ， 如 下 面 的 代码 所 示 : 

varobj={ 

gFuncl:function* (){ 
Ds 


上 ， 
* gFunc2(){ 
i 


1 
1 


obj 对 象 中 的 gFunc1 与 gFunc2 都 是 Generator 函 数 。 


5-16 ”使 用 class 定义 类 


ECMAScript 是 一 种 面向 对 象 语言 ,但 是 它 并 不 是 基于 类 的 。 通 过 前 面 的 学 习 ， 你 已 经 
掌握 了 在 ECMAScript 中 模拟 类 的 方式 ， 尽 管 我 们 可 以 通过 对 象 冒充 或 者 原型 链 的 方式 来 实 
现 类 的 功能 ， 但 这 种 定义 类 的 方式 与 传统 面向 对 象 语言 有 很 大 不 同 ，ES6 中 新 引入 了 class 关 
键 字 ， 使 用 它 定义 类 将 更 加 容易 、 更 加 规范 。 
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先 来 回顾 一 下 使 用 构造 函数 定义 类 的 方式 : 


function Teacher(name,age){ 
this.name = name; 
this.age = age; 
this.teaching = ()=>{ 
console.log(this.name,this.age); 


} 
let teacher = new Teacher("Jaki",25); 
teacher.teaching(); /Jaki 25 


ES6 的 class 关 键 字 定义 了 一 种 类 模板 ， 使 用 class 关 键 字 来 改写 上 面 的 Teacher 类 如 下 : 


class Teacher{ 

constructor(name,age){ 
this.name = name; 
this.age = age; 

} 

teaching(){ 
console.log(this.name,this.age); 

} 


} 
let teacher = new Teacher("Jaki",25); 
teacher.teaching(); /aki 25 


下 面 解释 一 下 class 关 键 字 的 用 法 , 首先 class 关 键 字 用 于 定义 一 个 类 , 在 代码 块 内 需要 提 
供 一 个 constructor 方 法 作为 类 的 构造 方法 , 也 就 是 说 , 当 使 用 new 关 键 字 加 类 名 来 创建 实例 化 
对 象 时 ， 系 统 会 调用 constructor 方 法 。 除 了 constructor 方 法 外 , 还 可 以 在 类 中 添加 其 他 自 定 义 
方法 ， 这 些 方法 默认 都 会 放 入 实例 对 象 的 原型 对 象 中 , 换 句 话说 , 这 些 方法 是 所 有 实例 对 象 
所 共享 的 。 

需要 注意 ， 你 不 一 定 非 要 显 式 地 实现 constructor 方 法 ， 如 果 你 不 实现 ， 系 统 就 会 自动 提 
供 一 个 空 的 constructor 方 法 作为 构造 函数 。 


5-17 ”使 用 class 实现 类 的 继承 


使 用 class 关 键 字 定义 类 的 另 一 个 方便 之 处 在 于 , 继承 对 其 来 说 变 得 十 分 容易 。 我们 不 需 
要 再 手动 对 原型 链 进行 操作 ， 例 如 : 
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class People{ 
constructor(name,age){ 
this.name = name; 
this.age = age; 


} 
class Teacher extends People{ 
constructor(name,age,subject){ 
super(name,age); 
this.subject = subject; 
ii 
teaching(){ 
console.log(this.name,this.age,this.subject); 


} 
let teacher = new Teacher("Jaki",25,"JavaScript"); 
teacher.teaching(); //Jaki 25 JavaScript 


class 的 继承 采用 extends 关 键 字 ， 需 要 注意 ， 如 果 你 使 用 了 继承 ， 那 么 在 constructor 构 造 
方法 中 必须 先 调 用 父 类 的 构造 方法 ， 即 使 用 super 关 键 字 来 调用 。super 关 键 字 既 可 以 当 函 数 
来 使 用 ， 又 可 以 当 父 类 对 象 、 原 型 对 象 来 使 用 。 若 在 子 类 的 构造 方法 中 使 用 super0， 则 表示 
调用 父 类 的 构造 方法 ， 若 使 用 super.method 的 方式 来 调用 父 类 的 方法 ， 则 表示 的 是 父 类 对 象 
的 原型 对 象 ， 例 如 : 


class People{ 
constructor(name,age){ 
this.name = name; 
this.age = age; 
1 
sayHiO{ 
console.log("sayHi"); 


} 
class Teacher extends People{ 
constructor(name,age,subject){ 
super(name,age); 
this.subject = subject; 
super.sayHi(); 
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teaching(){ 
console.log(this.name,this.age,this.subject); 
} 
} 
let teacher = new Teacher("Jaki",25,"JavaScript"); /l/sayHi 
teacher.teaching(); //Jaki 25 JavaScript 
使 用 class 定 义 类 可 以 实现 的 功能 在 我 们 前 面 介绍 的 模拟 类 的 示例 中 基本 也 可 以 实现 ,其 
实 ， 在 ES6 中 ，class 这 种 语法 只 是 引入 了 一 种 更 加 直观 可 读 、 更 加 规范 的 定义 类 的 语法 层面 
的 实现 ， 其 实质 依然 是 原型 链 。 


5-18 认识 JSON 数据 格式 


JSON 数 据 对 于 任何 互联 网 编程 人 员 来 说 都 是 十 分 亲切 的 ， 作 为 一 种 轻 量 级 的 数据 交换 
格式 ，JSON 在 前 后 端 通信 中 有 着 十 分 重要 的 价值 。JSON 全 称 JavaScript Object Notation ， 即 
JavaScript 对 象 节点 。 它 是 基于 ECMAScript 定 制 的 一 种 数据 格式 规范 ， 但 是 和 我 们 前 面 所 了 
解 的 ECMAScript 对 象 的 定义 规范 并 不 完全 一 致 。 

在 编写 JSON 数 据 字符 串 时 ， 你 需要 遵守 如 下 规则 : 


(1 ) 用 花 括 号 来 表示 独 享 。 

(2 ) 用 中 括号 来 表示 数组 。 

(3 ) 对 象 中 的 属性 用 逗号 分 隔 ， 键 与 值 使 用 冒号 分 隔 ， 并 且 键 需要 用 双 引 号 包 庄 。 
(4 ) 数组 中 的 数据 使 用 逗号 分 隔 。 


需要 注意 ，JSON 的 本 质 是 有 着 一 定 书 写 规则 的 字符 串 ， 其 和 ECMAScript 中 的 对 象 有 着 
本 质 的 区 别 。 在 JSON 规 则 中 ， 可 以 描述 的 类 型 只 有 6 种 ， 列 举 如 下 : 


(1) 数值 ( 整数 或 浮 点 数 ) ， 可 以 直接 编写 。 
(2 ) 字符 串 ， 需 要 在 双 引 号 中 。 

(3 ) 布尔 值 ，true 或 者 false。 

(4 ) 数组 ， 用 中 括号 包 庄 。 

(5 ) 对 象 ， 用 大 括号 包 庄 。 

(6 ) null， 表 示 空 值 。 


162 


第 5 章 ECMAScript 的 高 级 特性 


5-19 ”使 用 JSON 对 象 


首先 你 需要 清楚 ， 本 示例 中 所 说 的 JSON 对 象 是 ECMAScript 中 一 个 内 置 对 象 ， 使 用 它 可 
以 很 容易 地 实现 ECMAScript 对 象 与 ISON 字 符 串 之 间 的 转换 。 
将 ECMAScript 对 象 转换 成 JNON 对 象 的 示例 如 下 : 


var teacher = { 
name:'Jaki', 
age:25, 
teaching:function0){ 
console.log("teaching"); 
} 
} 


var json = JSON .stringify(teacher); 
console.log(typeof json,json); /l/string {"name":"Jaki","age":25} 
需要 注意 ，JSON 语 法 中 并 没有 函数 这 种 数据 类 型 ，ECMAScript 对 象 中 的 方法 会 被 默认 
剔除 。 我 们 再 来 深入 研究 一 下 JSON 对 象 的 stringifgy 方 法 ， 这 个 方法 的 主要 作用 是 将 对 象 转换 
成 JSON 字 符 串 ， 上 面 的 示例 代码 是 stringify 方 法 的 最 简单 使 用 ， 其 实 这 个 方法 中 还 可 以 有 另 
外 两 个 参数 ， 完 整 格式 如 下 : 
stringify(obj,rep,spac) 
其 中 ，obj 参 数 是 我 们 要 进行 转换 的 对 象 ，rep 人 参数 是 可 选 的 ， 若 我 们 将 其 以 数组 的 形式 
进行 设置 ， 则 在 进行 字符 串 构建 时 ， 只 有 数组 中 有 的 属性 会 被 解析 ， 例 如 : 
var teacher= { 
name:'Jaki', 
age:25, 
teaching:function(O) { 
console.log("teaching"); 


} 
} 
var json = JSON.stringify(teacher,["name"]); 
console.log(typeof json,json); //string {"name":"Jaki"} 
若 传 入 的 rep 参 数 为 函数 ， 则 此 函数 用 来 进行 JSON 值 解析 的 处 理 。 例 如 ， 我 们 可 以 让 解 
析出 的 所 有 字符 串 的 值 转换 为 大 写 ， 例 如 : 
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就 无 


var teacher = { 
name:'Jaki', 
age:25, 
teaching:function0){ 
console.log("teaching"); 


} 
var json = JSON .stringify(teacher,function(key,value){ 
if (typeof value 一 一 'string) { 


return value.toUpperCase(); 
} 
return value; 
D); 
console.log(typeof jsonjson); /l/string {"name":"JAKI","age":25} 


stringify 方 法 的 第 3 个 参数 用 来 进行 格式 化 输出 ， 如 果 不 传 ， 生 成 的 JSON 字 符 串 属性 前 
空格 ; 如 果 传 入 1 ~ 10 之 间 的 一 个 数值 ， 就 表示 使 用 多 少 个 空格 进行 格式 化 ， 如 果 传 入 


的 参数 是 一 个 字符 串 ， 就 使 用 此 字符 串 进 行 分 割 ， 例 如 : 
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var teacher = { 
name:'Jaki', 
age:25, 
teaching:function() { 
console.log("teaching"); 


} 
~ 
{ 
。。 。"name": "JAKI", 
ae:25 
} 
, 
var json = JSON.stringify(teacher, function(key,value) { 
if (typeof value === 'string'’) { 


return value.toUpperCase(); 
} 
return value; 
人 
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相对 于 将 ECMAScript 对 象 转换 为 字符 串 ，JSON 对 象 中 的 parse 方 法 则 可 以 将 一 个 JSON 
字符 串 转换 成 ECMAScript 对 象 ， 例 如 : 

var obj = JSON.parse("{\"name\":\"Jaki\",\"age\":25}"); 

console.log( typeof obj,obj); //object { name: 'Jaki', age: 25 } 

同样 ，parse 方 法 中 也 可 以 传 入 两 个 参数 , 第 2 个 参数 为 回调 函数 , 用 来 处 理 JSON 字 符 串 
中 解析 出 来 的 属性 。 例 如 ， 我 们 想 把 上 面 示例 JSON 字 符 串 中 的 name 属 性 的 值 修 改 为 Lucy， 
可 以 这 样 写 : 

var obj = JSON.parse(" \"name\":\"Jaki\",\"age\":25}",function(key,value)!{ 


console.log(key,value); 
还 (key =—= 'name') { 


return "Lucy"; 
1 
return value; 
D); 
console.log( typeof obj,obj); //object { name: 'Lucy', age: 25 } 


5-20 认识 Symbol 


你 一 定 还 记得 ， 前 面 我 们 说 在 ECMAScript 中 的 原始 值 类 型 具有 5 种 。 其 实 这 并 不 完全 正 
确 ， 将 其 修改 为 “传统 上 来 说 ，ECMAScript 中 的 原始 值 类 型 只 有 5 种 ”会 更 加 确切 一 些 。 在 
ECMAScript 6 中 暴露 了 Symbol 类 型 给 开发 者 , 其 也 是 一 种 原始 值 类 型 , 并 且 存在 的 唯一 用 途 
就 是 作为 对 象 的 属性 名 符号 。 

目前 ， 你 一 定 是 一 头 雾 水 ， 属 性 名 符号 是 个 怎样 的 概念 呢 ? 其 实 也 很 简单 ， 例 如 ,我们 
在 构建 对 象 时 通常 会 采用 下 面 的 方式 : 

varobj={ 

name:"Jaki" 

} 

obj.age = 25; 

obj["subject"] = "JavaScript"; 

console.log(obj); //{ name: 'Jaki', age: 25, subject 'JavaScript } 

在 上 面 的 代码 中 ，name、age、subject 都 可 以 理解 为 一 种 属性 名 符号 ， 只 是 这 些 是 传统 
的 属性 名 符号 ，Symbol 是 一 种 特殊 的 属性 名 符号 。 

Symbol 并 不 是 构造 函数 ， 直 接 使 用 Symbol 函数 来 创建 Symbol 类 型 的 值 ， 例 如 : 
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var symName = Symbol("name'"); 
var symAge = Symbol("age"); 
varteacher= { 
[symName]:"Jaki" 
} 
teacher[symAge] = 25; 
console.log(teacher[symName],teacher[symAsge]); /Jaki 25 


上 面 的 代码 中 有 几 点 需要 注意 ， 首 先 Symbol 属 性 不 能 使 用 点 语法 ， 其 次 Symbol 属性 有 
一 定 的 不 可 见 性 。 也 就 是 说 ， 我 们 使 用 forin 对 对 象 的 属性 进行 遍历 或 者 使 用 keys 、 
getOwnPropertyNames 方 法 来 获取 对 象 的 属性 名 都 无 法 获取 Symbol 属性 ,Object 函数 对 象 上 封 
装 的 getOwnPropertySymbols 函 数 专门 用 来 获取 对 象 上 的 Symbol 属性 ， 例 如 : 


console.log(Object.getOwnPropertySymbols(teacher)); 川 Symbol(name), Symbol(age) ] 


还 有 一 点 需要 注意 ， 上 面 的 代码 在 创建 Symbol 值 的 时 候 有 传 入 一 个 字符 串 参 数 ， 其 实 
这 个 参数 并 没有 真正 的 用 途 ， 只 用 来 标识 符号 ， 帮 助 我 们 进行 打印 调试 。 


5-21 注册 全 局 的 Symbol 符号 


在 调用 Symbol 函数 创建 Symbol 值 的 时 候 ， 每 次 都 会 创建 一 个 唯一 的 符号 值 ， 例 如 : 
var sl = Symbol("symbol"); 

var s2 = Symbol("symbol"); 

console.log(s1 = 一 s2); //false 


从 上 面 的 代码 可 以 看 出 ， 传 入 的 描述 参数 并 不 会 起 到 复 用 符号 的 作用 。Symbol 对 象 中 
提供 了 方法 用 来 注册 全 局 的 Symbol 符号 和 从 全 局 注册 表 中 获取 Symbol 符号 ， 示 例 代 码 如 下 : 

/注册 

var s3 = Symbol.for("key"); 

var s4 = Symbol.for("key"); 

console.log(s3,s4,s3===s4); /Symbol(key) Symbol(key) true 

console.log(Symbol.keyFor(s3)); JWkey 


首先 ，Symbol 对 象 中 的 for 方 法 并 不 总 是 会 返回 一 个 新 的 符号 值 ， 首 先 会 从 注册 符号 表 
中 找 是 否 已 经 存在 这 个 符号 值 ， 如果 存在 ， 就 直接 返回 ， 如 果 不 存在 ， 才 会 新 建 并 放 入 符号 
表 。 从 打印 信息 可 以 看 出 ， 全 局 符号 是 对 应 key 值 唯一 的 。Symbol 对 象 中 的 keyFor 方 法 则 是 
用 来 获取 某 个 全 局 符号 对 应 在 符号 表 中 的 键 值 。 
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5-22 ” 壕 代 器 Symbol 


我 们 知道 ， 有 些 对 象 可 以 使 用 for-of 进 行 失 代 ， 像 数组 对 象 ， 有 些 对 象 却 不 行 。 原 因 古 
可 以 使 用 forof 进 行 迭 代 的 对 象 都 实现 了 迭代 器 方法 。 我 们 如 何 让 一 个 自 定义 的 对 象 支持 
forof 迭 代 呢 ?7 使 用 iterator 符 号 来 定义 方法 即 可 ， 例 如 : 


varmyArray= { 
name:'Jaki', 
age:25, 
[Symbol.iterator]:function* (|){ 
yield Jaki' 
yield 25; 
b 
b 
// 将 打印 Jaki 25 
for(let v of myArray){ 
console.log(v); 
} 
/打印 Jaki25 
console.log(...myArray); // 同 console.log('Jaki',25); 


需要 注意 , 迭代 器 符号 需要 设置 为 一 个 迭代 器 对 象 , 而 Generator 函 数 正 是 会 生成 一 个 迭 
代 器 对 象 。 还 有 一 点 需要 注意 ，“…” 也 是 一 种 运算 符 ， 其 用 来 进行 可 迭代 对 象 的 展开 。 


5-23 ”正则 表达 式 符 号 


在 学 习 字符 串 类 型 的 过 程 中 , 你 是 否 也 有 过 疑问 , 正则 表达 式 是 如 何 进 行 匹配 操作 的 ? 
其 实 使 用 正则 表达 式 符 号 , 任何 自 定义 的 对 象 都 可 以 起 到 正则 表达 式 的 作用 , 例如 字符 串 实 
例 对 象 中 的 match 、replace 、search 、split 方 法 。 默 认 情况 下 ， 我 们 只 能 将 字符 串 或 者 正则 表 
达 式 对 象 当成 参数 传 入 ,如 果 我 们 自 定义 的 对 象 实现 了 相关 符号 属性 , 也 可 以 作为 参数 传 入 
这 些 方法 ， 例 如 : 
var myArray= { 
name:'Jaki', 
age:25, 
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[Symboliterator]:function* (){ 


yield ‘Jaki'; 
yield 25; 
} 
//match 


[Symbol.match]:function(string){ 
return string+"match"; 

上 

[Symbolreplace]:function(string){ 
return string+"replace"; 

小 
[Symbol.search]:function(string){ 
return string+"search"; 

小 
[Symbol.splitj:function(string){ 
return string+"split"; 


} 


} 

console.log("subject".match(myArray)); /subjectmatch 
console.log("subject".replace(myArray)); //subjectreplace 
console.log("subject".search(myArray)); //subjectsearch 
console.log("subject".split(myArray)); //subjectsplit 


最 后 ， 还 有 一 点 需要 注意 ，Symbol 属 性 在 进行 JSON 转 换 的 时 候 会 被 自动 忽略 。 


5-24 ”使 用 export 进行 模块 的 导出 


在 ECMAScript 中 ， 一 直 都 缺少 一 种 模块 引入 的 语法 。 这 使 得 大 项 目的 拆 分 变 得 十 分 困 
难 。ES6 中 引入 了 模块 化 的 设计 思想 ， 通 过 export 关 键 字 可 以 将 一 个 文件 内 的 对 象 导出 ， 在 
另 一 个 文件 中 ， 使 用 import 可 以 实现 其 他 文件 中 对 象 的 导入 。 由 于 目前 大 多 数 浏览 器 的 
JavaScript 解 释 环 境 并 不 能 支持 export 和 import 模 块 编程 ， 因 此 这 里 只 做 语法 的 演示 。 

export 用 于 规定 当前 文件 对 外 提供 的 接口 ，import 则 是 引入 这 些 功能 接口 。 

例如 , 创建 一 个 命名 为 module.js 的 文件 , 如 果 我 们 要 将 其 作为 配置 文件 向 外 界 提供 一 些 
用 户 配 置信 息 的 接口 ， 可 以 这 么 做 : 


export var userName = "Jaki"; 
export var password = "123456"; 
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上 面 的 示例 代码 在 变量 的 声明 前 添加 了 export 关 键 字 ， 其 向 外 部 输出 了 userName 和 
password 两 个 变量 。 当 然 ， 你 也 可 以 选择 在 一 次 性 导出 多 个 变量 ， 例 如 : 

var scrool = "No.1"; 

vartheClass = "No.2"; 

export {scrool,theClass}; 


除了 可 以 将 变量 作为 导出 的 对 象 外 ， 也 可 以 导出 函数 或 者 类 ， 例 如 : 


export function(){ 
console.log("Hello World"); 
} 
export class Teacher!{ 
constructor(name,age){ 
this.name = name; 
this.age = age; 


} 

默认 情况 下 , 导出 的 对 象 在 外 界 的 名 称 就 是 对 象 原始 的 名 称 , 你 也 可 以 对 导出 对 象 的 名 
称 使 用 as 进行 自 定义 ， 例 如 : 

var jaki = "Jaki"; 


var lucy = "Lucy"; 
export {jaki as peoplel,lucy as people2}; 


对 于 上 面 示例 代码 ， 外 界 在 使 用 jaki 和 lucy 变 量 时 ， 需 要 使 用 people1l 与 people2。 
5-25 ”使 用 import 进行 模块 的 导入 


import 关 键 字 和 export 关 键 字 对 应 ,其 用 于 引入 export 关 键 字 所 导出 的 对 象 。 我 们 再 创建 
一 个 名 为 mainjs 的 文件 ， 比 如 要 导入 modulejs 中 的 userName 和 password 变 量 ， 可 以 这 么 做 : 


import {userName,password} from "./module.js"; 
console.log(userName,password); 


import 后 面 的 大 括号 中 需要 指定 要 引入 模块 中 导出 的 对 象 ，from 关 键 字 后 面 需要 指定 模 
块 文件 的 路 径 。 同 样 ， 在 引入 文件 时 ， 你 也 可 以 为 引入 的 对 象 起 一 个 新 的 名 字 ， 例 如 : 


import {userName as name,password as word} from "./module.js"; 
console.log(name,word); 
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improt 还 提供 了 一 种 语法 ， 其 可 以 将 外 部 模块 中 所 有 导出 的 对 象 一 起 引入 进来 ， 并且 绑 
定 到 指定 的 对 象 上 ， 例 如 : 


import* as module from "module.js"; 
console.log(module.userName,module.password); 


很 多 时 候 , 一 个 外 部 的 模块 往往 只 需要 向 外 提供 一 个 唯一 的 接口 。 例 如 ,通常 将 一 个 独 
立 的 类 写成 一 个 单独 的 文件 ， 那 么 只 暴露 这 个 类 本 身 作为 接口 就 可 以 了 。 因 此 ，ES6 的 导出 
与 导入 还 提供 了 default 默 认 项 设置 。 例 如 ， 在 modulejs 文 件 中 编写 如 下 代码 : 


export default class PeopleO{ 
constructor(){ 
} 

} 


上 面 代码 的 意思 是 将 People 类 作为 module.js 文 件 的 默认 导出 对 象 。 在 mainjs 中 ， 可 以 使 
用 如 下 代码 进行 导入 : 

import myModule from "module.js"; 

上 面 的 示例 代码 有 两 点 需要 注意 ， 首 先 myModule 是 自 定义 的 名 称 ， 代 表 module.js 文 件 
中 默认 导出 的 对 象 ， 即 People 类 。 还 有 一 点 需要 特别 注意 ， 这 种 当时 引入 的 对 象 是 不 需要 写 
在 大 括号 内 的 。 默 认 对 象 和 非 默认 对 象 也 是 可 以 同时 引入 的 ， 它 们 并 不 会 相互 影响 ， 例 如 : 


import myModule, {userName} from "module.js"; 


5-26 ”编程 练习 


练习 1: 分 析 下 面 代码 的 返回 值 。 
(function(x,f= 0=> x) { 


Var Xi 
Var y= x; 
X=2; 
Teturn [x, y, fO]; 
DD 
解析 : 本 题 答 案 为 [2,1,1]。 本 题 有 较 大 的 迷惑 性 ， 考 察 的 知识 点 也 较 多 。 首 先 考察 了 自 
执行 匿名 函数 , 传 入 了 数值 1 作为 参数 , 之 后 考察 了 ES6 中 国 数 的 默认 参数 和 箭头 函数 的 相关 
知识 , 由 于 箭头 的 作用 域 固化 为 定义 时 的 作用 域 , 因此 该 箭头 函数 如 果 执 行将 返回 数值 1。 
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之 后 执行 y=x， 因 此 y=1， 接 着 执行 x<=2， 因 此 返回 结果 为 [2,1,1]。 
练习 2: 分 析 下 面 代码 的 返回 值 。 


(function() { 
return [ 
(0 => this.x).bind({ x: 'inner’ })(), 
(0 一 thisx)O 
] 
.call(f x: outer }); 


解析 : 本 题 答案 为 [outer,'outer]。 其 实 本 题 并 不 复杂 ,主要 考察 箭头 函数 中 this 的 固化 ， 
在 箭头 函数 声明 时 ， 其 中 的 this 将 固化 成 和 当前 作用 于 中 的 this 一 致 ， 即 外 层 函 数 的 this，call 
方法 将 外 层 函 数 的 this 指 定 为 对 象 {x: 'outer} ， 因 此 两 个 箭头 函数 的 执行 结果 均 返 回 'outer 。 


练习 3: 分 析 下 面 的 代码 执行 后 y 的 值 。 
letx, {x:y=1}= {x};y; 


解析 : 本 题 答 案 为 “1” .本题 主 要 考察 解构 赋值 的 相关 知识 , 声明 的 x 初始 值 为 undefined， 
因此 解构 赋值 失败 会 将 y 赋 值 为 默认 值 1 。 


练习 4: 分 析 下 面 代 码 的 结果 。 
[1 length 


解析 : 本 题 答案 为 “3”。 本 题 主要 考察 扩展 运算 符 “...” 的 使 用 ， 上 面 的 代码 将 字符 
串 进行 扩展 后 ， 再 将 数组 进行 扩展 ， 结 果 为 长 度 为 3 的 数组 。 


练习 5: 分 析 下 面 代码 的 输出 结果 。 


const promise = new Promise((resolve, reject) => { 
console.log(1) 
resolve() 
console.log(2) 


») 
promise.then(() => { 


console.log(3) 


妨 


console.log(4) 


解析 : 上 面 的 代码 将 输出 1，2，4，3。 本 题 主要 考察 Promise 的 用 法 ，Promise 是 ES6 中 
提供 的 一 种 异步 编程 解决 方案 ， 其 then 函 数 中 的 回调 是 异步 执行 的 。 
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练习 6: 分 析 下 面 代码 的 打印 结果 。 


Promise.resolve(1) 

.then((res) => { 
console.log(res) 
return 2 

) 

.catch((err) => { 
return 3 

D) 

‘then((res) => { 
console.log(res) 


山 


解析 : 上 面 的 代码 将 打印 1，2。Promise 可 以 进行 链 式 调用 ， 调 用 then 或 者 catch 函 数 后 ， 
都 会 重新 返回 一 个 新 的 Promise 对 象 。 


172 


JavaScript 常用 设计 模式 


从 本 章 开始 , 我 们 将 进入 设计 模式 的 学 习 。 设计 模式 是 不 分 语言 的 , 甚至 是 不 分 行业 的 。 
简单 地 说 , 设计 模式 就 是 行业 经 验 的 积案 所 表现 出 的 最 佳 实践 。 例 如 在 盖 房子 时 ， 人 们 最 开 
始 的 尝试 可 能 是 一 层 一 层 地 往 上 人 又 ， 后 来 发 现 对 于 高 层 建筑 ,这 样 的 做 法 有 很 大 缺陷 ,于 是 
人 们 开始 先 搭 框架 再 进行 填充 。 这 个 过 程 就 是 经 验 的 积累 , 最 后 形成 的 建筑 流程 方式 就 是 设 
计 模 式 。 对 于 软件 开发 ,解决 一 个 问题 的 方式 可 能 有 很 多 种 ， 原 则 上 你 可 以 不 使 用 任何 设计 
模式 和 任何 开发 技巧 来 完成 一 个 大 型 项 目的 开发 , 暂且 不 说 你 能 否 这 样 完 成 一 个 项 目 , 即便 
能 , 之 后 的 维护 和 扩展 工作 也 将 十 分 恐怖 。 

其 实 ， 在 前 面 的 学 习 中 ， 你 已 经 接触 过 设计 模式 ， 只 是 我 们 没有 系统 地 进行 总 结 学 习 ， 
例如 使 用 工厂 模式 来 模拟 类 、 使 用 原型 模式 来 实现 继承 、 使 用 兴 代 器 模式 来 实现 枚 举 等 。 本 
章 将 通过 实践 来 更 深入 地 理解 “设计 模式 ”在 开发 中 的 应 用 。 相 信 通 过 本 章 的 学 习 , 除了 可 
以 提高 你 的 编程 能 力 外 ， 你 思考 问题 的 方式 也 会 更 加 灵活 。 


6-1 工厂 设计 模式 


工厂 模式 是 开发 中 十 分 常用 的 一 种 设计 模式 ， 核 心 是 将 对 象 的 组 装 过 程 封 装 在 工厂 内 
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部 ， 对 外 提供 统一 的 调用 接口 。 举 个 现实 中 的 例子 , 客户 在 购买 汽车 时 并 不 需要 知道 汽车 是 
如 何 生产 的 , 也 不 需要 知道 各 个 品牌 的 汽车 结构 有 什么 不 同 , 客户 只 需要 关心 如 何 操作 汽车 
就 可 以 了 (几乎 所 有 汽车 的 操作 方式 都 没有 什么 不 同 ) 。 在 编程 开发 中 ,工厂 模式 主要 由 接 
口 协议 、 实 现 类 和 工厂 函数 组 成 ， 如 图 6-1 所 示 。 


协议 (生产 说 明 书 ) 
实现 类 (生产 车 间 ) 实现 类 (生产 车 间 ) 实现 类 (生产 车 间 ) 


工厂 函数 (对 外 工 门 ) 


图 6-1 工厂 模式 示意 图 

在 工厂 模式 中 , 接口 用 来 定义 对 外 协议 , 也 可 以 简单 理解 为 生产 说 明 书 , 就 像 任何 汽车 
都 要 按照 指定 的 行驶 标准 生产 ; 实现 类 是 针对 同一 个 协议 的 不 同 实现 , 可 以 对 比 理解 为 生产 
不 同型 号 的 汽车 ; 工厂 函数 是 直接 供 开 发 者 调用 的 方法 ， 用 来 进行 对 象 实例 的 组 装 或 创建 。 

针对 实现 工厂 模式 ,许多 编程 语言 都 有 先天 的 优势 , 例如 Java 中 有 接口 概念 ,Swift 中 有 
协议 概念 。 在 JavaScript 中 , 我 们 可 以 通过 原型 的 方式 来 模拟 协议 。 下 面 我 们 使 用 工厂 模式 实 
现 一 个 图 形 工厂 。 

首先 , 你 需要 制定 一 个 接口 协议 , 例如 所 有 图 形 都 提供 一 个 draw 方 法 , 这 个 方法 的 作用 
可 能 是 将 图 形 绘制 在 屏幕 上 ， 目 前 可 以 用 打印 的 方式 进行 简单 模拟 。 用 一 个 shapeInterface 对 
象 来 描述 协议 ， 代 码 如 下 : 

var shapeInterface = { 


draw:function(){ 
throw "must be implementation" 





} 
} 


上 面 的 代码 提供 了 一 个 draw 方 法 ， 却 在 其 中 直接 抛 出 了 异常 ， 这 样 做 的 目的 是 提醒 所 有 
实现 这 个 协议 的 类 都 必须 重 写 这 个 draw 方 法 , 如 果 不 这 样 做 , 就 失去 了 协议 的 约束 作用 ( 就 像 
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要 生产 汽车 ， 必 须 符 合 国家 的 标准 规定 ) 。 我 们 再 来 创建 两 个 图 形 类 ， 以 Circle 和 Rect 为 例 : 
function CircleO{ 
this.draw=function(O){ 
console.log("Circle"); 
} 
Circle.prototype = shapelInterface; 
function RectO{ 
this.draw=function(O){ 
console.log("Rect"); 


1 
Rect.prototype = shapelInterface; 


实现 一 个 图 形 工厂 函数 如 下 : 
function Shape(type){ 
if (type==="Circle") { 
return new Circle(); 
jelse if(type==="Rect"){ 
return new Rect(); 


} 
} 


在 实际 开发 中 ， 只 会 将 shapeInterface 和 Shape 函 数 暴 露 给 其 他 开发 者 ， 会 将 Circle 和 Rect 
作为 内 部 私有 的 类 ， 这 样 做 的 好 处 是 将 对 象 的 真实 构建 封装 了 起 来 ， 对 于 其 他 开发 者 来 说 ， 
他 们 只 需要 传 入 自己 想 创建 的 图 形 类 型 ， 调 用 工厂 函数 来 构建 图 形 对 象 即 可 ， 例 如 : 

var shape = Shape("Circle"); 

var shape2 = Shape("Rect"); 


shape.draw(); //Circle 
shape2.draw(); //Rect 


本 章 的 学 习 方式 一 开始 会 让 你 觉得 不 太 习 惯 , 毕竟 设计 模式 更 多 的 是 用 在 大 型 项 目的 框 
架设 计 中 。 本 章 中 的 示例 也 只 是 尽 可 能 地 将 每 种 模式 的 结构 和 编写 流程 展示 出 来 , 可 能 你 会 
觉得 画蛇添足 、 去 直 求 曲 ,但 是 只 要 静 下 心 来 思考 这 些 设计 模式 的 编程 思路 ， 一 定 会 让 你 受 
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6-2 单 例 设计 模式 


单 例 模式 是 一 种 非常 流行 的 设计 模式 。 在 介绍 单 例 模式 的 概念 前 , 我 们 先 来 看 一 个 生活 
中 的 小 例子 。 随 着 互联 网 深入 人 们 的 生活 , 现在 越 来 越 多 的 人 选择 在 网 上 购买 火车 票 ,不 知 
你 有 没有 思考 过 这 样 的 场景 , 每 个 人 在 网 上 购买 车 票 时 都 会 访问 票务 中 心 , 由 票务 中 心 来 负 
责 车 票 余 票 的 管理 、 车 次 信息 的 实时 更 新 等 。 其实 这 个 票务 中 心 就 起 到 了 单 例 的 作用 , 所 有 
人 访问 到 的 票务 中 心 都 是 同一 个 票务 中 心 ， 只 有 这 样 才能 保证 每 个 人 获取 的 信息 是 一 致 的 ， 
一 个 人 购 票 成 功 后， 所 有 人 都 会 看 到 这 列车 的 余 票 减少 。 

对 于 软件 开发 , 单 例 模式 的 应 用 场景 更 加 广泛 , 例如 有 登录 功能 的 软件 , 用 户 信息 的 管 
理 类 通常 用 单 例 模式 来 设计 , 还 有 有 关 文 件 和 数据 的 操作 类 ， 也 通常 使 用 单 例 来 实现 。 单 例 
设计 模式 符合 如 下 3 条 规则 : 


(1 ) 单 例 只 能 有 一 个 实例 。 
(2 ) 单 例 必须 为 其 他 所 有 调用 方 提 供 这 一 实例 。 
(3 ) 单 例 实例 一 旦 创建 ， 就 不 会 轻易 销毁 。 


在 JavaScript 中 ， 实 现 单 例 设计 模式 通常 采用 如 下 方式 ; 


(1 ) 定义 一 个 全 局 对 象 ， 作 为 可 以 全 局 访问 单 例 的 接口 。 
(2 ) 定义 一 个 单 例 方法 ， 用 来 获取 单 例 实例 。 
(3 ) 在 使 用 单 例 时 ， 若 单 例 实例 不 存在 ， 则 进行 创建 ， 若 存在 ， 则 直接 返回 。 


示例 代码 如 下 : 


var Singleton = { 
instance:function(){ 
if (Singleton. _ instance===undefined) { 
Singleton. instance= { 
name:' 关 羽 '， 
weapon:' 青 龙 优 月 刀 '， 
blood:100, 
skill:function(){ 
console.log(" 挥 刀 斩 "); 
} 
} 


} 
return Singleton._ instance; 
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} 
} 
var user = Singleton.instance(); 
console.log(user.name,user.weapon); /关羽 青龙 优 月 刀 
user.skill(); // 挥 刀 斩 
user.skill=function(){ 

console.log(" 斩 首 "); 


} 
Singleton.instance().skill(); // 斩 首 


6-3 ”建造 者 设计 模式 


建造 者 模式 的 核心 是 使 用 多 个 简单 的 对 象 构造 复杂 对 象 。 在 介绍 设计 模式 的 教程 中 , 常 
常 拿 建 别墅 的 例子 来 描述 建造 者 。 一 个 老板 需要 购买 一 套 别墅 房产 ， 他 首先 会 找到 开发 商 ， 
直接 与 开发 商 交 涉 来 购买 别墅 ,开发 商会 联系 各 个 生产 商 或 包工 房 , 例如 找 来 建筑 工人 盖 房 、 
泥 瓦工 人 刷 墙 、 装 修 工人 进行 室内 装修 等 。 当 别墅 建 好 后 ,开发 商 直 接 对 老板 进行 交付 。 在 
这 个 场景 中 ,老板 就 是 我 们 编程 中 复杂 对 象 的 使 用 方 , 开发 商 就 是 建造 者 , 而 具体 的 建筑 工 
人 、 泥 瓦 工人 和 装修 工人 等 就 是 生产 者 。 建造 者 将 复杂 对 象 的 创建 过 程 拆 分 成 一 个 个 简单 的 
对 象 交 给 相应 的 生产 者 完成 创建 , 最 终 建 造 者 将 创建 出 的 简单 对 象 进行 组 合 ,以 提供 复杂 对 
象 供 使 用 者 使 用 ， 如 图 6-2 所 示 。 
产品 
提供 完整 的 产品 
建造 者 


提供 组 装 产品 的 各 个 部 件 7 “提供 组 装 产 品 的 各 个 部 件 
生产 者 生产 者 


图 6-2 建造 者 模式 示意 图 


建造 者 模式 有 如 下 优点 : 


(1 ) 建造 者 只 独立 完成 拼装 过 程 ， 易 扩展 、 易 维护 。 
(2 ) 将 复杂 对 象 进行 拆 分 ， 隐藏 对 象 构建 的 内 部 细节 ， 符 合 单一 功能 原则 。 
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下 面 换 一 个 例子 ， 使 用 JavaScript 来 模拟 一 个 外 卖 套 餐 的 建造 者 模式 实现 。 首 先 ， 通 过 
如 下 3 个 步骤 来 构建 建造 者 模式 。 

(1 ) 制定 协议 。 

(2 ) 拆 分 生产 者 。 

(3 ) 建造 者 进行 组 合 。 

协议 的 目的 是 为 了 提供 给 使 用 者 使 用 接口 ,也 是 为 了 约束 建造 者 构建 的 对 象 必须 遵守 约 
定 。 代 码 如 下 : 


var mealInterface = { 


getName:function0{ 
throw "必须 有 套餐 名 "; 
}, 
getStaple:function(){ 
throw "必须 有 主食 "; 
} 
getDrink:function0){ 
throw "必须 有 饮料 "; 
} 


} 
生产 者 用 来 创建 被 查分 后 的 具体 对 象 ， 比 如 饮料 和 主食 : 


function Drink(type){ 
Switch(type)f 
case 1:{ 
return "可 口 可 乐 "; 
} 
break; 
case 2:{ 
return " 热 牛 奶 "; 
} 
break:; 
1 
function Staple(type){ 
Switch(type){ 
case 1:{ 
Teturm "汉堡 包 "; 
h 
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break: 
case 2:{ 
return "鸡肉 卷 "; 
} 
break; 
} 
} 
下 面 我 们 以 餐厅 作为 建造 者 进行 套餐 的 组 合 : 
function restaurant(type){ 
switch(type)!{ 
case 1:{ 


let food = Objectcreate(mealInterface); 
food.getName = functionO{ 
return "可 乐 汉堡 套餐 "; 
} 
food.getDrink = function(){ 
return Drink(type); 
food.getStaple = function(){ 
return Staple(type); 
retur food: 
1 
break; 
case 2:{ 
let food = Object.create(meallnterface); 
food.getName = functionO{ 
return "鸡肉 卷 牛奶 套餐 "; 
} 
food.getDrink = function(){ 
return Drink(type); 
} 
food.getStaple = function(){ 
return Staple(type); 
} 


return food; 
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break: 


h 
使 用 如 下 : 


var f= restaurant(2); 


console.log(f.getName(),f.getStaple(),f.getDrink()); // 鸡 肉 卷 牛 奶 套餐 鸡肉 卷 热 牛 奶 
6-4 ”适配器 设计 模式 


适配器 模式 虽然 也 被 称 为 设计 模式 , 其 实在 很 多 情况 下 , 适配器 模式 都 不 是 使 用 在 程序 
结构 设计 中 , 而 是 为 了 应 用 而 临时 采取 的 一 种 妥协 方案 。 适 配器 模式 为 两 个 互 不 兼容 的 系统 
提供 可 以 调用 的 接口 。 举 个 生活 中 的 常见 场景 , 现在 我 们 周围 到 处 都 被 电子 设备 充斥 着 , 各 
种 设备 在 充电 时 需要 的 电压 可 能 都 不 同 ， 但 是 电厂 提供 给 用 户 的 都 是 统一 的 220V 交 流 电 ， 
这 就 需要 使 用 变压器 来 将 统一 的 220V 电 压 转换 成 各 种 设备 需要 的 电压 。 适 配器 就 起 到 这 样 
一 种 作用 。 
下 面 我 们 来 看 JavaScript 中 如 何 应 用 适配器 模式 。 例 如 ， 有 一 个 已 经 编程 完成 的 用 于 数 
组 排序 的 对 象 ， 代 码 如 下 : 
var sort={ 
type:"DESC", 
data:[], 
run:functionO{ 
if (this.type—="DESC") { 
return this.data.sort(function(a,b){ 
return a<b; 
D) 
} 
if (this.type——="ASC") { 
return this.data.sort(function(a,b){ 
return a>b; 
) 


h 
可 以 使 用 如 下 方式 进行 使 用 : 
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sort.type = "ASC"; 

sort.data = [2,3,1,5,3,2,6]; 

console.log(sort.run()); | 

现在 假如 有 一 个 用 户 输入 系统 ， 只 能 接受 如 下 格式 的 排序 命令 : 

Ds // 表 示 对 后 面 的 数值 进行 降序 并 返回 数组 

WA T2342 1 A // 表 示 对 后 面 的 数值 进行 升序 并 返回 数组 

虽然 sort 对 象 可 以 完成 排序 迪 辑 ,但 是 其 不 能 识别 这 种 字符 串 形式 的 输入 ， 这 时 就 需要 
使 用 适配器 来 对 sort 对 象 进行 转换 ， 代 码 如 下 : 





vardl="D 1,2,3,5,1,2" // 表 示 对 后 面 的 数值 进行 降序 并 返回 数组 
var d2 = "A 3,1,2,4,2,1,4" // 表 示 对 后 面 的 数值 进行 升序 并 返回 数组 
Var sortAdapt = { 

data:™", 


run:function(){ 
let array = this.data. split(" "); 
let type = array[0]; 
sort.type = type=——="D"?"DESC":"ASC"; 
sort.data = array[1].split(","); 
return sort.run(); 
} 
} 
sortAdapt.data = d2; 
console.log(sortAdapt.run()); | i rE | 
sortAdapt 就 是 sort 对 象 的 适配器 , 其 属性 和 方法 都 与 sort 基 本 保持 一 致 , 并 且 满 足 了 这 种 
输入 设备 的 命令 格式 。 


6-5 ”装饰 堪 设计 模式 


装饰 器 模式 的 作用 是 扩展 已 有 类 的 新 功能 -装饰 器 模式 也 可 以 理解 为 对 已 有 类 的 一 种 包 
装 , 在 保持 原 类 结构 不 修改 的 前 提 下 扩展 类 的 功能 。 例如 , 游戏 中 的 武将 有 一 些 物品 和 技能 ， 
同样 武将 也 可 以 骑马 , 我 们 可 以 通过 装饰 器 模式 来 对 武将 对 象 进行 装饰 , 让 其 有 骑马 冲锋 的 
能 力 。 示 例 代码 如 下 : 


Var general = { 


name:" 关 羽 "， 
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weap:' 青 龙 优 月 刀 ', 
Skill:function(){ 
console.log(this.name+" "+this.weap+" "+" 挥 刀 斩 7"); 
} 
} 
Var GeneralPack = function(general){ 
this.name = general.name; 
this.weap = general.weap; 
this.horse = " 赤 免 马 "; 
this.skill = function|){ 
console.log(this.name+" "+this.weap+" "+this.horse+" "+" 挥 刀 斩 "); 
} 
general.skill(); /1/ 关 羽 青龙 候 月 刀 挥 刀 斩 
var general 2 = new GeneralPack(general); 


general 2.skill(); // 关 羽 青龙 优 月 刀 赤 免 马 挥 刀 斩 


上 面 的 代码 中 ，general 对 象 是 武将 对 象 , GeneralPack 函 数 是 一 个 装饰 器 类 , 用 来 构造 武 
将 对 象 经 过 装饰 器 装饰 后 的 对 象 。 需要 注意 , 一 般 我 们 会 保持 装饰 后 的 对 象 和 原 对 象 同 样 的 
接口 ， 这 样 对 装饰 器 的 使 用 者 来 说 ， 这 个 装饰 对 象 实际 上 是 透明 的 ， 只 是 做 了 武将 能 力 的 
扩展 。 


6-6 -外观 设计 模式 


外 观 设 计 模 式 有 时 也 称 门 面 模式 , 它 的 核心 其 实 也 是 组 合 与 包装 。 外 观 模 式 可 以 将 复杂 
的 子 系统 进行 组 合 ,对 外 提供 统一 的 访问 接口 ,隐藏 系统 内 部 的 复杂 结构 。 例 如 ,我 们 去 医 
院 看 病 时 ， 可 能 要 经 历 挂号 、 问 诊 、 检 查 、 开 药 、 付 费 、 取 药 这 些 过程 。 如 果 第 一 次 去 这 个 
医院 ,不 熟悉 流程 将 会 耗费 大 量 时 间 。 这 时 ,如 果 有 一 个 指示 牌 , 将 上 述 过 程 与 服务 地 点 清 
晰 地 标识 出 来 , 将 大 大 提高 我 们 看 病 的 效率 。 这 个 指示 有 牌 就 充当 了 外 观 设计 模式 中 的 门面 对 
象 。 下 面 用 JavaScript 代 码 来 模拟 上 面 的 过 程 。 


var register = { 
wait:function(){ 
console.log(" 排 队 等 待 取 号 "); 
让 
Tegist:function(){ 
console.log(" 拿 到 挂号 "); 
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} 
} 
Var doctor= { 
diagnose:function(){ 
console.log(" 进 行 问 诊 "); 
下 
watchCheck:function(check){ 
console.log(" 查 看 检查 结果 : "+check); 
Is 
medication:function() { 
console.log(" 开 发 药方 "); 
return "药方 A"; 


} 


varcheck ={ 
makeCheck:functionO){ 
console.log(" 做 检查 "); 
return "检查 结果 "; 


} 
var medication = { 
cost:function(medication){ 
console.log(" 付 费 : "+medication); 
》， 
take:function(){ 
console.log(" 取 药 回 家 "); 
1 
了 
让 
排队 等 待 取 号 
拿 到 挂号 
进行 问 诊 
做 检查 
查看 检查 结果 : 检查 结果 
开发 药方 
付费 : 药方 A 
取 药 回 家 
时 
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register.wait(); 
register.regist(); 

doctor. diagnose(); 

var res = check.makeCheck(); 
doctor.watchCheck(res); 

var me = doctor.medication(); 
medication.cost(me); 
medication.take(); 


可 以 看 到 , 要 完成 这 样 一 个 看 病 流程 , 开发 者 需要 调用 多 个 对 象 的 多 个 方法 , 并 且 需 要 
进行 参数 的 来 回 传递 ， 我 们 可 以 使 用 外 观 设计 模式 来 简化 这 一 过 程 的 调用 。 
var hospital = { 
watch:function(){ 
register.wait(); 
register.regist(); 
doctor.diagnose(); 
var res = check.makeCheck(); 
doctor. watchCheck(res); 
var me = doctor.medication(); 
medication.cost(me); 
medication.take(); 
} 


hospital.watch(); 


外 观 模式 十 分 适用 于 这 样 的 场景 : 多 个 方法 组 合 调用 , 并 且 参 数 传递 只 在 这 些 方法 内 部 
使 用 。 使 用 外 观 模 式 不 仅 可 以 简化 调用 过 程 、 降 低 错 误 率 ， 也 可 以 提高 代码 的 复 用 性 。 


6-7” 享 元 设计 模式 


享 元 设计 模式 是 一 种 对 系统 进行 优化 的 设计 模式 , 对 于 存在 大 量 对 象 的 系统 , 使 用 享 元 
模式 可 以 显著 减轻 内 存 负担 。 比如 一 个 图 书 管理 系统 , 其 中 要 存放 图 书馆 中 所 有 图 书 的 相关 
信息 和 借 书 相关 信息 ， 比 如 书号 、 书 名 、 简 介 、 分 类 、 存 放 位 置 、 借 书 人 、 借 书 时 间 等 。 一 
般 来 说 ,一 座 图 书馆 中 的 书 成 千 上 万 , 随 着 录入 系统 的 图 书 越 来 越 多 ， 所 消耗 的 内 存 也 将 越 
来 越 大 。 享 元 模式 的 核心 是 将 对 象 通用 且 静 态 的 部 分 与 独立 且 动态 的 部 分 进行 分 离 , 使 其 内 
部 状态 和 外 部 状态 隔离 开 ， 将 内 部 状态 进行 共享 复 用 。 
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下 面 的 代码 模拟 一 个 图 书 类 ， 每 当 有 图 书 录 入 系统 时 ， 都 需要 构建 出 这 样 一 个 类 对 象 。 


function Book(sn,name,contentauthorreader'initTime,expriseTime){ 
this.sn = sn; 
this.name = name; 
this.content = content; 
this.author = author; 
this.reader = reader; 
this.initTime = initTime; 
this.expriseTime = expriseTime;; 
this.show = function|){ 
console.log(this.sn,this.name,this.content,this.author,this.reader,this. initTime, 
this.expriseTime); 
} 
} 
var book = new Book(10011, "老人 与 海 " "在 逆境 中 坚持 ", "海明威 ",，"Jaki", "2017.11.11", 
"2017.12;12"); 
book.show(); /10011 ' 老 人 与 海 ' ' 在 逆境 中 坚持 '' 海 明 威 ''Jaki' '2017.11.11''2017.12.12' 


下 面 使 用 享 元 模式 来 修改 上 面 的 代码 : 


function Book_In(sn,name,content,author){ 
this.sn = sn; 
this.name = name; 
this.content = content; 
this.author = author; 


var bookPool= new Set(); 
function Book(sn,name,content,author,reader,initTime,expriseTime)!{ 


for(var b of bookPool){ 
if (b.sn=—=sn) { 
this.in = b; 
} 
} 


if (this.in==undefined) { 
this.in = new Book_In(sn,name, content, author); 
bookPool.add(this.in); 

} 


this.reader = reader; 
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this.initTime = initTime; 
this.expriseTime = expriseTime; 
bh 
Book.prototype = { 
show:function(){ 
console.log(this.in.sn,this.in.name,this.in.content,this.in.author,this.reader, 
this.initTime,this.expriseTime); 
b 
} 
var book = new Book(10011," 老 人 与 海 "" 在 逆境 中 坚持 "" 海 明 威 ","Jaki","2017.11.11", 
2017.1232 
book.show(); 
var book2 = new Book(10011," 老 人 与 海 "" 在 逆境 中 坚持 "" 海 明 威 ""Jaki","2017.11.11", 
07.1212% 
book2.show(); 
console.log(book.in=—book2.in); //true 


上 面 的 代码 将 通用 属性 提取 成 享 元 ， 放 入 一 个 共享 池 中 ,在 向 系统 中 录入 图 书信 息 时 ， 
会 优先 从 共享 池 中 取 数 据 ( 同一 图 书 的 SN 编码 都 是 唯一 且 一 致 的 ) ， 如 果 没 有 ， 才 进行 享 
元 的 创建 。 从 打印 信息 也 可 以 看 出 ,不 同 的 图 书 录 入 对 象 实际 上 是 共享 同一 个 享 元 对 象 , 享 
元 设计 模式 可 以 大 大 减少 内 存 的 开销 。 


6-8 代理 设计 模式 


在 开发 中 , 代理 设计 模式 是 一 种 十 分 实用 的 设计 模式 。 其 实在 生活 中 , 代理 模式 也 无 处 
不 在 , 例如 现在 十 分 流行 的 网 购 ， 在 买 家 和 卖家 之 间 的 物流 公司 就 可 以 理解 为 一 个 代理 ， 当 
买 家 购买 物品 后 ,由 物流 公司 代替 卖家 进行 送 货 。 同 样 在 房屋 租 任 过 程 中 ,房产 中 介 也 可 以 
理解 为 代理 。 下 面 用 JavaScript 代 码 来 模拟 一 下 网 购 中 的 代理 模式 。 


varme={ 
shop:undefined, 
buy:function0){ 
console.log(" 网 购 "+this.shop.delever()); 
} 
} 
var computerShop = { 
delegate:undefined, 
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delever:function0O{ 
return this.delegate.delever(); 
} 
} 
var logistics= { 
delever:function() { 
return "顺丰 物流 正在 送 货 "; 
5 
me.shop = computerShop; 
computerShop.delegate = logistics; 
me.buyO; // 网 购 顺丰 物流 正在 送 货 


如 上 面 的 代码 所 示 , 对 买 家 来 说 , 物品 的 运输 是 由 卖方 负责 的 ,对 卖方 来 说 , 他 并 不 会 
自己 去 送 货 ， 即 computerShop 对 象 并 不 会 自己 去 实现 delever 方 法 ,而 是 交 由 一 个 代理 对 象 实 
现 ， 这样 代 理 对 象 就 和 卖家 对 象 进行 解 厢 ， 并 且 买 家 、 卖 家 、 代 理 三 方 都 可 以 灵活 组 合 , 例 
如 买 家 可 以 选择 其 他 的 网 店 对 象 , 只 要 其 有 delever 方 法 , 同样 , 网 店 也 可 以 灵活 搭配 物流 商 ， 
由 具体 的 代理 对 象 来 完成 送 货 功能 。 


6-9 ”责任 链 设 计 模 式 


责任 链 设计 模式 用 来 连接 处 理 任务 的 一 连 串 节点 ,使 用 责任 链 设计 模式 可 以 将 复杂 的 处 
理 过 程 拆 分 成 多 个 负责 方 , 并 且 可 以 灵活 替换 和 修改 。 生活 中 的 很 多 单位 都 采用 这 样 的 设计 
模式 来 组 织 结构 ,例如 要 开发 一 处 房产 ， 可 能 需要 多 个 政府 部 门 的 批准 与 检查 ， 每 个 部 门 对 
自己 所 管辖 的 范围 负责 。 

在 JavaScript 代 码 中 ， 我 们 可 以 使 用 责任 链 设 计 模式 来 实现 校 验 网 址 功能 。 例 如 ， 当 用 
户 输入 一 个 网 址 后 ,需要 根据 用 户 输入 的 信息 进行 网 址 的 有 效 性 判断 ， 然 后 分 别 做 出 提示 。 


var typeCheck = { 
nextHandler:undefined, 
handle:function(obj){ 
if (typeof obj ! 一 "string") { 
console.log(" 必 须 为 字符 串 "); 
return false; 
} 
if (this.nextHandler!=undefined) { 
this.nextHandlerhandle(obj); 
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jelse{ 
console.log(" 校 验 成 功 "); 
return true; 


} 


var emptyCheck = { 
nextHandler:undefined, 
handle:function(obj){ 
if (obj.length===0) { 
console.log(" 字 符 串 不 能 为 空 "); 
return false; 
} 
if (this.nextHandler!=undefined) { 
this.nextHandler.handle(obj); 


jelsef 
console.log(" 校 验 成 功 "); 
return true; 

} 


} 
var vaildCheck = { 
nextHandler:undefined, 
handle:function(obj){ 
if (I/^(www\.).+(\.com)$/.test(obj)) { 
console.log(" 字 符 串 不 合 规 "); 
return false; 
} 
if (this.nextHandler!=undefined) { 
this.nextHandler.handle(obj); 
}else{ 
console.log(" 校 验 成 功 "); 
return true; 


} 
typeCheck.nextHandler = emptyCheck; 


emptyCheck.nextHandler = vaildCheck: 
typeCheck.handle("www.ws.com"); 
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上 面 的 代码 创建 了 责任 链 中 的 3 个 节点 , 第 1 个 节点 用 来 校 验 传 入 的 数据 是 否 为 字符 串 类 
型 ,第 2 个 节点 用 来 校 验 传 入 的 字符 串 是 否 为 空 字符 串 , 第 3 个 节点 用 来 进行 网 址 的 正则 匹配 。 
任何 一 个 阶段 校 验 失败 都 会 中 断后 面 的 校 验 。 这 种 责任 链 将 十 分 容易 扩展 , 如 果 需 要 将 校 验 
规则 改 成 邮箱 ， 只 需要 在 vaildCheck 后 面 再 添加 一 个 邮箱 校 验 的 节点 即 可 。 


6-10 命令 设计 模式 


命令 设计 模式 常常 用 来 进行 复杂 功能 实现 与 使 用 的 解 厢 。 其 核心 是 将 功能 的 调用 封装 成 
命令 , 对 使 用 方 来 说 , 只 需要 提供 正确 的 命令 和 参数 即 可 。 如 果 你 在 电脑 上 使 用 过 命令 行 工 具 ， 
理解 命令 设计 模式 将 十 分 容易 。 下 面 使 用 JavaScript 代 码 来 模拟 使 用 命令 模式 进行 四 则 运算 。 


varCalu= { 
perform:function(p){ 
this.run(p.type,p.params); 
}, 
run:function(command,params){ 
this[command](...params); 
;» 
add:function(a,b){ 
console.log("a+b=",a+b): 
上 
sub:function(a,b){ 
console.log("a-b=",a-b); 
上 
mul:function(a,b){ 
console.log("a*b=",a*b); 
}， 
div:function(a,b){ 
console.log("a/b=",a/b); 
} 
} 
varp={ 
type:"add", 
params:[10,5] 
上 
varp2={ 
type:"sub", 
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params:[10,5] 
} 
varp3={ 
type:"mul", 
params:[10,5] 
} 
varp4={ 
type:"div", 
params:[10,5] 
L 
Calu.perform(p); 
Calu.perform(p2); 
Calu.perform(p3); 
Calu.perform(p4); 


如 上 面 的 代码 所 示 ，Calu 是 核心 的 四 则 运算 对 象 , 其 中 提供 了 加 减 乘除 等 函数 , 对 于 使 
用 方 来 说 ,我 们 并 不 直接 调用 这 些 函 数 ， 要 进行 四 则 运算 , 需要 通过 创建 一 个 命令 对 象 ， 这 
个 对 象 的 type 属 性 用 来 指定 要 进行 的 运算 类 型 ，params 参 数 用 来 设计 进行 运算 的 数值 ， 通 过 
run 函 数 对 命令 的 解析 来 执行 具体 的 功能 函数 ， 这 样 就 完成 了 使 用 和 实现 的 解 硒 。 这 种 设计 
模式 在 实际 开发 中 也 有 广泛 的 应 用 , 例如 在 使 用 Ajax 进 行 网 络 请 求 时 , 许多 第 三 方 的 封装 都 
会 采用 命令 模式 来 进行 请 求 的 配置 


6-11 迭代 需 设 计 模 式 


关于 迭代 器 , 你 其 实 并 不 陌生 , 在 前 面 的 学 习 中 也 使 用 过 迭代 器 为 自 定 义 对 象 扩展 支持 
for-of 肖 历 。JavaScript 中 内 置 实现 的 迭代 器 模式 前 面 只 是 使 用 ， 并 没有 详细 思考 它 的 设计 原 
理 。 和 迭代 器 设计 模式 可 以 统一 遍历 集合 对 象 的 方式 , 并且 十 分 易于 扩展 , 开发 者 可 以 十 分 容 
易 地 让 自 定义 的 集合 支持 统一 提供 的 迭代 器 。 并 且 ， 对 于 使 用 方 来 说 , 统一 的 接口 可 以 更 加 
便于 进行 代码 的 组 织 与 管理 。 下 面 我 们 使 用 JavaScript 代 码 来 模拟 实现 一 个 简单 的 迭代 器 。 


/定义 一 个 迭代 器 协议 
var Mylterator = { 
next:function(){ 
throw "必须 实现 next" 
} 
} 
// 和 迭代 器 方法 
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function tool(obj,callback){ 
var item = obj.next(); 
while(item!==undefined){ 
callback(item); 
item = obj.next(); 
b 
} 
/实现 迭代 器 的 对 象 
varmyObj={ 
name:'Jaki', 
age:24, 
subject:"JavaScript", 
teaching:function(){ 
console.log("teaching"); 
}， 
_keys:["name","age","subject"], 
_tip:0， 
next:function(){ 


return this. keys[this._ tipt+]; 


} 
} 
myObj._ proto_ =Mylterator; 
/验证 
tool(myObj,function(item){ 
console.log(item); 


D); 
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上 面 的 示例 代码 就 是 迭代 器 设计 模式 的 工作 思路 ， 当 有 新 的 集合 对 象 需要 支持 欠 代 时 ， 


开发 者 只 需要 在 其 中 实现 next 方 法 ，tool 函 数 就 可 以 很 好 地 对 其 进行 工作 。 


6-12 ”备忘录 设计 模式 


备忘录 设计 模式 也 可 以 理解 为 一 种 备份 设计 模式 ,用 来 进行 对 象 内 部 状态 的 备份 ,当然 ， 


备份 的 可 能 并 不 是 完整 的 对 象 ， 我 们 在 使 用 文本 编辑 器 时 可 以 撤销 ， 浏 览 网 页 时 可 以 返回 ， 
都 是 备忘录 模式 的 实际 应 用 。 下 面 我 们 用 JavaScript 来 演示 关于 用 户 输入 与 撤销 的 备忘录 模式 
的 实现 。 
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var EditProtocol = { 
_stateArray:[], 
revoke:function(|){ 
this._refresh(this. stateArray.pop()); 
} 
save:function(){ 
this. stateArray.push(this. state()); 
}, 
_refresh:function(){ 
throw "必须 实现 _refresh 方 ; 





上 
_state:function(){ 
throw "必须 实现 state 方法 "; 
} 
} 
var teacher = { 
name:"Jaki", 
age:25, 


subject:"JavaScript", 

_refresh:function(state){ 
this.name = state.name; 
this.age = state.age; 
this.subject = state.subject; 


小 
_state:function(){ 
return { 
name:this.name, 
age:this.age, 
subject:this.subject 
} 


teacher. proto “= EditProtocol; 

teacher.save(); 
console.log(teacher.name,teacher.age,teacher.subject); 
teacher.name = "Lucy"; 

teacher.age = 23; 
console.log(teacher.name,teacher.age,teacher.subject); 
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teacher.revoke(); 
console.log(teacher.name,teacher.age,teacher.subject); //Jaki 25 JavaScript 


上 面 的 代码 中 ， 我 们 使 教师 对 象 支持 撤销 操作 ， 备 忘 录 模 式 核心 的 协议 是 EditProtocol 
对 象 ， 任何 需要 支持 撤销 操作 的 对 象 , 只 要 以 它 为 原型 并 且 实现 了 必须 重 写 的 方法 ， 就 可 以 
完成 状态 的 保存 与 恢复 。 备 忘 录 模 式 在 开发 中 的 实际 应 用 价值 很 大 , 除了 在 状态 恢复 的 场景 
中 需要 外 ， 有 时 候 也 可 以 用 来 缓存 网 络 数据 。 


6-13 ”观察 者 设计 模式 


观察 者 设计 模式 常常 用 来 实现 订阅 边 辑 。 当 对 象 间 出 现 一 对 多 的 交互 关系 时 , 也 可 以 使 
用 观察 者 模式 来 处 理 。 例如 在 现实 生活 中 , 杂志 社 与 读者 间 就 是 观察 者 设计 模式 的 实际 应 用 。 
观察 者 设计 模式 一 般 由 服务 端 和 客户 端 两 方 组 成 , 客户 端 通过 订阅 来 监听 服务 端的 信息 , 由 服 
务 端 发 送信 息 给 已 经 订阅 的 客户 端 。 下 面 我 们 使 用 JavaScript 通 过 观察 者 来 实现 如 下 迪 辑 : 教 
务 处 作为 服务 端 ， 会 给 教师 发 布 任务 ， 当 教师 接收 到 任务 后 ， 开 始 执 行 教学 任务 ， 代 码 如 下 : 


var Service={ 
_customer:new Set(), 
addObserver:function(obj,func){ 
this._customer.add( {obj:obj,func:func}); 
上 ， 
deleteObserver:function(obj){ 
var has; 
this._customer.forEach(function(object){ 
if (object.obj===obj) { 
has = object; 
} 
D); 
if (has!==undefined) { 
this._customer.delete(has); 
} 
}, 
publish:function(msg){ 
console.log(" 发 布 了 订阅 消息 "); 
this._customer.forEach(function(obj){ 
obj.func.call(obj.obj,msg); 
D; 
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} 
} 


varteacherl = { 
name:"Jaki", 
teach:function(msg){ 
console.log(this.name+" 开 始 教学 "+msg); 
} 
} 
var teacher2= { 
name:"Lucy", 
teach:function(msg){ 
console.log(this.name+" 开 始 教 学 "+msg); 
} 
b 
Service.addObserver(teacher!l ,teacher 1 .teach); 
Service.addObserver(teacher2,teacher2.teach); 
人 
发 布 了 订阅 消息 
Jaki 开始 教学 Swift 
Lucy 开始 教学 Swift 
» 
Service.publish("Swift"); 
Service.deleteObserver(teacherl); 
让 
发 布 了 订阅 消息 
Lucy 开始 教学 JavaScript 
dh 
Service.publish("JavaScript"); 


如 上 面 的 代码 所 示 , 我 们 为 服务 端 提供 了 添加 订阅 与 删除 订阅 的 方法 , 只 要 服务 端 有 发 
布 动作 ， 所 有 观察 者 都 可 以 监听 到 并 执行 预定 的 任务 。 


6-14 ”编程 练习 


练习 1: 试 着 使 用 工厂 设计 模式 来 模拟 一 个 汽车 工厂 。 
解析 : 可 参考 如 下 代码 : 
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/协议 接口 
var CarInterface = { 
des:function(){ 
throw "must be have a function 'des'"; 


} 
} 
function Car(){ 
this.des = function(){ 
console.log(" 我 是 一 辆 轿车 "); 
} 
上 


Car.prototype = CarInterface; 
function BusO{ 
this.des = function(){ 
console.log(" 我 是 一 辆 公交 车 "); 


人 
Bus.prototype = CarInterface; 
/工厂 函数 
function CarFactory(type){ 
if (type=='Car") { 
return new Car(); 
}else{ 
return new Bus(); 
} 
} 


var obj = CarFactory(Car); 
obj.des(); // 我 是 一 辆 轿车 


工厂 模式 的 优势 是 : 当 我 们 创建 某 一 个 对 象 时 ， 可 以 不 用 关心 其 具体 的 类 。 


练习 2: 试 着 用 观察 者 模式 来 实现 如 下 多 辑 : 
有 3 个 对 象 : 猫 、 老 鼠 和 人 。 猫 看 见 了 老鼠 ， 老 鼠 吓 跑 了 ， 人 被 吵 醒 。 
解析 : 可 参考 如 下 代码 : 


varcat={ 
_outernew Set(), 
addObserver:function(obj,callback){ 
this._outer.add( {obj:obj,callback:callback}); 
二 
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deleteObserver:function(obj){ 
var has; 
this._outer.forEach(function(object){ 
if (object.obj===0bj) { 
has = object; 


D; 
if (has!==undefined) { 
this._outer.delete(has); 


}， 


shout:function(O){ 
console.log(" 噶 "); 
this，outer.forEach(function(obj){ 
obj.callback.call(obj.obj); 
D; 


var mouse = { 
run:functionO{ 


console.log(" 老 鼠 吓 跑 了 "); 


} 
1 
varman={ 
wake:function0){ 
console.log(" 人 被 惊醒 了 "); 
} 
} 


cat.addObserver(mouse,mouse.run); 
cat.addObserver(man,man.wake); 
cat.shout(); 

// 将 打印 

/ 嘲 

/老鼠 吓 跑 了 

/人 被 惊醒 了 
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DOM 的 全 称 是 Document Object Model ( 文档 对 象 模型 ) ， 它 是 HTML 的 标准 对 象 模型 ， 
也 是 HTML 的 标准 编程 接口 。 简 单 来 说 ， 它 提供 了 JavaScript 对 HTMIL 文 档 内 容 进 行 获 取 、 修 
改 、 添 加 或 删除 的 功能 。 网 页 的 展现 完全 依靠 HTML 文 档 , 因此 也 可 以 理解 为 DOM 提 供 了 用 
JavaScript 动 态 修改 网 页 的 功能 。 

BOM 是 指 Browser Object Model, 即 浏览 器 对 象 模型 .DOM 是 文档 模型 ,JavaScript HTML 
DOM 是 提供 给 开发 者 操作 文档 的 接口 , 同样 , JavaScript HTML BOM 是 提供 给 开发 者 操作 浏 
览 器 窗口 的 接口 。BOM 主 要 包含 5 个 对 象 : Window 、Navigator、Screen 、History 和 Location 。 
这 些 对 象 各 有 用 途 , 开发 者 通过 它们 可 以 获取 窗口 位 置 尺寸 、 跳 转 历史 、URL 信 息 等 各 种 浏 

本 章 主要 介绍 DOM 的 使 用 及 BOM 相 关 的 5 个 对 象 中 提供 的 常用 属性 与 方法 。 


7-1 创建 学 习 模 板 


本 章 开始 , 我 们 编写 的 代码 将 不 再 只 是 逻辑 上 的 演示 , 还 会 有 许多 界面 元 素 。 因此 , 我 
们 将 使 用 网 页 浏览 器 作为 学 习 的 工具 ,虽然 任何 浏览 器 都 可 以 运行 我 们 编写 的 代码 , 但 是 建 
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议 安装 一 个 Google Chrome 浏 览 器 ， 它 有 强大 的 开发 者 功能 ， 可 以 帮助 你 调试 与 检查 代码 。 
首先 在 桌面 上 新 建 一 个 文件 夹 ， 将 其 命名 为 project， 在 其 中 再 创建 两 个 文件 夹 和 一 个 
index.html 文 件 , 文件 夹 分 别 命 名 为 demo 与 javaScript。 使 用 Sublime Text 工 具 直接 打开 桌面 上 
的 project 文 件 夹 ( 将 文件 夹 直 接 拖 入 Sublime Text 工 具 即 可 ) ， 你 的 项 目 结构 看 起 来 应 该 是 
如 图 7-1 所 示 的 样子 。 


project 


demo 


javasScript 


index.html 





图 7-1 工程 模板 结构 


在 之 后 的 学 习 中 ， 我 们 会 将 每 个 示例 HTML 文 件 放 入 demo 文 件 夹 中 ， 将 每 个 示例 
JavaScript 文 件 放 入 javaScript 文 件 夹 中 ，index.html 文 件 作 为 目录 列表 ， 这 样 可 以 更 加 清晰 地 
管理 每 个 示例 文件 , 即使 时 间 过 去 很 久 , 你 需要 查阅 相关 内 容 时 , 也 会 一 目 了 然 。 举 个 例子 ， 
先 编写 index.html 文 件 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title> 示 例 </title> 

</head> 

<body style="margin: 100px"> 

<a hre 伍 "./demo/demo.html"> 示 例 一 </a> 

</body> 

</htm> 


在 demo 文 件 夹 下 新 建 一 个 demo.html 文 件 ， 编 写 如 下 代码 : 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title> 框 架 示例 <title> 

</head> 

<body> 

<h1> 我 是 程序 框架 示例 </h1> 
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</body> 

</htmP> 

之 后 直接 在 浏览 器 中 打开 index.html, 单 击 “ 示 例 一 ”标题 , 即 可 跳 转 到 demo.html 页 面 。 
好 了 ， 我 们 的 准备 工作 做 完了 ,愉快 地 开始 本 章 的 学 习 吧 。 


7-2 几 个 重要 概念 


HTML DOM 是 树 状 结构 ， 其 中 所 有 的 事物 都 是 节点 。 根 据 标准 定义 ， 整 个 文档 是 一 个 
文档 节点 ， 每 个 HTML 元 素 是 元 素 节 点 ， 元 素 内 的 文本 是 文本 节点 ， 每 个 HTML 元 素 的 属性 
是 属性 节点 ， 注 释 是 注释 节点 。 图 7-2 是 一 个 HTML DOM 树 的 示例 。 





文档 




















元 素 : 属性 : 元 素 : 元 素 : 
<title> href <a> <hl> 


文本 : : 文本 : 
“文档 标题 “我 的 链接 ” “我 的 标题 
































图 7-2 HTML DOM 树 示例 
既然 是 树 结构 ,就 存在 一 些 层级 关系 。 在 节点 树 中 , 顶端 节点 被 称 为 根 节点 , 例如 图 7-2 
中 的 <html> 节 点 。 除 了 根 节点 外 ， 每 个 节点 都 有 父 节 点 ， 例 如 图 7-2 中 的 <body> 和 <head> 节 
点 的 父 节 点 是 <html> 节 点 ,<html> 节 点 的 子 节点 是 <head> 节 点 和 <body> 节 点 。 拥 有 相同 父 节 
点 的 节点 互 为 同胞 节点 , 例如 图 7-2 中 的 <head> 节 点 和 <body> 节 点 互 为 同胞 节点 。 需 要 注意 ， 
文本 也 是 一 种 节点 (文本 节点 ) ， 例 如 图 7-2 中 的 “我 的 链接 ”就 是 <a> 节 点 的 子 节点 。 


7-3 ”Document 文档 对 象 
每 个 载 入 浏览 器 的 文档 都 会 成 为 Document 对 象 ，Document 对 象 为 开发 者 提供 了 对 


HTML 页 面 中 所 有 元 素 的 访问 接口 ,在 前 面 创建 的 project 工 程 的 demo 文 件 夹 下 新 建 一 个 命名 
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为 documentDemo.html 的 文件 , 在 javaScript 文 件 夹 下 新 建 一 个 命名 为 documentJs.js 的 文件 。 编 
写 documentDemo.html 文 件 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Decument</title> 
<head> 
<body> 
<h1l> 标 题 </hl> 
<p> 段 落 一 段落 一 段落 一 段落 一 段落 一 段落 一 段落 一 段落 一 段落 一 段落 一 <p> 
<p> 段 落 二 段落 二 段落 二 段落 二 段落 二 段落 二 段落 二 段落 二 段落 二 段落 二 段落 二 </p> 
<a name="first"> 第 一 个 锚 </a><br /> 
<a name="second"> 第 二 个 锚 </a><br /> 
<a name="third"> 第 三 个 锚 </a><br /> 
<script type="text/javascript" sre="../javaScript/documentJs.js"></script> 
</body> 
</htmb> 


编写 documentJs.js 文 件 如 下 : 


(function(O){ 
console.log(" 文 档 所 包含 的 所 有 节点 "); 
for (vari= document.all.length - 1; i>= 0; i--) { 
var element = document.all[j]; 





console.log(element.localName); 
} 
console.log(" 文 档 中 锚 点 数 : "+document.anchors.length); 
DO; 


修改 index.html 文 件 如 下 ， 添 加 示例 入 口 : 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title> 示 例 </title> 

</head> 

<body style="margin: 100px"> 

<a href="./demo/demo.html"> 示 例 一 </a> 


200 


第 7 章 ， JavaScript HTML DOM/BOM 


<a href="./demo/documentDemo.html">Decument 示例 </a> 


</body> 


</htmb> 


在 浏览 器 中 运行 ,打开 调试 模式 (Chrome 浏览 器 可 以 使 用 Option+Command+J 来 打开 调 
试 模式 ) ， 观 察 打印 区 ， 可 以 看 到 文档 中 所 有 节点 的 名 称 。 

document 对 象 的 all 属 性 用 来 获取 文档 中 所 有 的 HTML 节 点 对 象 , 这 个 属性 是 一 个 线性 列 
表 ，anchors 属 性 则 用 于 获取 文档 中 的 所 有 锚 点 对 象 。 除了 这 两 个 属性 外 ，document 对 象 还 有 
4 个 列表 属性 ， 分 别 是 applets 、forms 、images 、links。applets 获 取 文 档 中 的 所 有 Applet 对 象 ， 
forms 获 取 文 档 中 的 所 有 表单 对 象 , images 获 取 文 档 中 的 所 有 Area 和 Link 对 象 。document 对 象 
定义 的 其 他 常用 属性 如 表 7-1 所 示 。 


表 7-1 document 对象 定 义 的 其 他 常用 属性 














属性 名 意义 

Body 获取 文档 中 的 body 节点 对 象 

Cookie 用 来 设置 和 获取 Cookie 

Domain 获取 载 入 当前 文档 的 Web 主机 名 

lastModified 获取 当前 文档 的 最 后 修改 日 期 

Referrer 获取 载 入 当前 文档 的 URL， 必 须 是 从 超 链 接 载 入 这 个 属性 才 有 值 
Title 获取 当前 文档 的 标题 

URL 获取 当前 文档 的 URL 


需要 注意 ，cookie 属 性 在 设置 浏览 器 Cookie 时 ， 使 用 如 下 格式 进行 设置 : 

document.cookie = "userName=jaki"; 

设置 的 字段 会 被 追加 到 现 有 的 Cookie 中 去 (Chrome 浏览 器 不 支持 静态 文件 设置 Cookie， 
测试 时 需 注 意 使 用 其 他 浏览 器 ) 。 

document 对 象 中 定义 的 常用 方法 如 表 7-2 所 示 。 


方法 名 


表 7-2 document 对 象 定义 的 常用 方法 
参 数 意义 





Open 


(mimetype,replace) 打开 一 个 新 的 文档 , 将 原 内 容 擦 除 
mimetype 用 来 指定 文档 类 型 ， 默 认 


为 "texthtml" 

replace 只 有 一 个 选项 "replace", 这 个 
参数 是 否 提供 决定 了 新 打开 的 文档 
是 否 蔡 换 父 文档 
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现代 JavaScript 编程 : 经 典范 例 与 实践 技巧 
( 续 表 ) 
方法 名 参 数 意义 
Write (expl,exp2...) 向 文档 中 写 入 内 容 
参数 将 按 顺 序 写 入 文档 
Writeln (expl,exp2...) 作用 同 write 函数 ， 不 同 的 是 在 每 
参数 将 按 顺 序 写 入 文档 次 写 入 后 都 会 加 换行 
Close 无 关闭 使 用 open 方法 打开 的 文档 
getElementById (id) 获取 根据 指定 id 查找 到 的 第 一 个 
节点 对 象 
getElementsByName (name) 获取 根据 name 属性 查找 到 的 节点 
对 象 集合 
getElementsByTagName | (tag) 获取 根据 HTML 标签 名 获取 到 的 








节点 对 象 集合 


上 面 列举 的 方法 中 ，3 个 获取 节点 的 方法 在 实际 开发 中 十 分 常用 ， 主 要 通过 它们 来 实现 


对 网 页 的 动态 更 改 。 


7-4 ”Element 节点 对 象 


上 一 示例 中 我 们 了 解 到 ， 在 一 个 HTML 文 档 中 有 4 种 节点 ，HTML 标 签 是 元 素 节 点 ， 标 
签 属性 为 属性 节点 , 标签 内 的 文本 为 文本 节点 , 注释 为 注释 节点 。JavaScript 可 以 操作 具体 的 
节点 Element 对 象 来 对 节点 进行 增 、 删 、 改 、 查 等 操作 。 请 看 如 下 示例 代码 : 


HTML 文 件 : 


<!DOCTYPE html> 
<html> 
<head> 


<title>ElementDemo</title> 


</head> 
<body> 


<a id="a" hre 伟 "https:/www.baidu.com"> 链 接 1</a><p id='p> 文 本 </p><p id="p"> 文 本 </p> 
<script type="text/javascript" src="../javaScript/elementJs.js"></script> 


</body> 
</htmP> 
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let newElement = document.createElement("a"); 
newElement.innerHTML = "链接 2"; 
element.appendChild(newElement); 


使 用 getElementById 函 数 返回 的 对 象 就 是 节点 对 象 ， 可 以 调用 document 对 象 的 


createElement 方 法 来 创建 新 标签 节点 ， 这 个 函数 中 需要 传 入 HTML 标 签名 作为 参数 。Element 
对 象 的 appendChild 方 法 用 来 在 当前 节点 内 追加 子 节点 , 调用 此 函数 后 , 效果 会 直接 展示 在 浏 


览 器 界面 上 。 


Element 对 象 上 也 定义 了 许多 常用 属性 ， 如 表 7-3 所 示 。 


表 7-3 Element 对 象 定义 的 常用 属性 




















































属性 名 意 义 

childNodes 获取 节点 中 所 有 子 节点 ， 需 要 注意 ， 元 素 中 的 文本 也 是 节点 ， 也 会 被 获取 到 

attributes 获取 节点 的 属性 集合 

className 获取 节点 的 class 属性 值 

clientHeight 获取 元 素 的 可 见 高 度 

clientWidth 获取 元 素 的 可 见 宽度 

contentEditable | 设置 或 获取 元 素 是 否 可 编辑 ， 可 以 设置 为 true、false 和 inherit， 设 置 inherit 表示 
默认 与 父 元 素 一 臻 

dir 设置 或 获取 元 素 的 文本 方向 

firstChild 获 旬 下 的 第 一 个 子 节点 (可 以 是 文本 节点 ) 

id L 

innerHTML 设置 或 获取 元 素 的 内 容 ， 以 字符 串 的 方式 

lang 设置 或 返回 标签 的 lang 属性 值 

lastChild 获取 节点 内 的 最 后 一 个 子 节 点 

nextSibling 获取 当前 节点 的 下 一 个 同胞 节点 , 需要 注意 , 如 果 在 HTML 文件 中 两 个 节点 间 有 
空格 ， 这 个 属性 将 获取 到 undefined 

nodeName 获取 节点 名 称 ， 如 果 是 标签 元 素 ， 就 会 获取 标签 名 如 果 是 属性 元 素 ， 就 会 获取 
属性 名 

nodeType 获取 节点 类 型 

nodeValue 获取 节点 的 值 

offsetHeight 获取 元 素 高 度 

offsetWidth 获取 元 素 宽度 

offsetLeft 获取 元 素 的 水 平 偏 移 位置 

offsetParent 获取 元 素 计算 偏 移 位 置 所 参照 的 父 节 点 

offsetTop 获取 元 素 的 垂直 偏 移 位 置 

ownerDocument | 获取 根 节点 Document 对 象 
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( 续 表 ) 
属性 名 意义 
parentNode 获取 元 素 的 父 节点 
previousSibling | 获取 节 
scrollHeight 获取 元 素 的 整体 内 容 高 度 
scrollWidth 获取 元 素 的 整体 内 容 宽度 
scrollTop 元 素 的 整体 内 容 高 度 减 去 元 素 的 可 见 高 度 
scrollLeft 元 素 的 整体 内 容 宽度 减 去 元 素 的 可 见 宽度 
style 设置 或 获取 元 素 的 style 属性 节点 
tabIndex 设置 或 获取 元 素 的 tab 切换 顺序 
tagName 获取 元 素 的 标签 名 
textContent 设置 或 获取 元 素 的 文本 内 容 
title 设置 或 获取 元 素 的 title 属性 





关于 Element 对 象 的 nodeType ,nodeName 和 nodeValue 属 性 ,我 们 有 必要 进一步 总 结 一 下 ， 
首先 nodeType 会 返回 一 个 1~12 的 数值 ， 每 一 个 值 代表 一 种 节点 类 型 ， 如 图 7-3 所 示 。 


节点 类 型 

1 Element 

2 Attr 

3 Text 

4 CDATASection 

5 EntityReference 

6 Entity 

7 Processinglnstruction 
8 Comment 

9 Document 

10 DocumentType 

11 | DocumentFragment 
12 Notation 
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描述 
代表 元 素 


代表 属性 
代表 元 素 或 属性 中 的 文本 内 容 


代表 文档 中 的 CDATA 部 分 (不 会 由 解析 
器 解析 的 文本 ) 


代表 实体 引用 


代表 实体 


代表 处 理 指令 

代表 注释 

代表 整个 文档 (DOM 树 的 根 节点 ) 

向 为 文档 定义 的 实体 提供 接口 
代表 轻 量 级 的 Document 对 象 ， 能 够 容纳 
文档 的 某 个 部 分 


代表 DTD 中 声明 的 符号 


子 节点 


Element, Text, Comment, 
ProcessingInstruction, CDATASection, 
EntityReference 


Text, EntityReference 
None 


None 


Element, ProcessinglInstruction, 
Comment, Text, CDATASection, 
EntityReference 


Element, Processinglnstruction, 
Comment, Text, CDATASection, 
EntityReference 


None 
None 


Element, ProcessingInstruction, 
Comment, DocumentType 


None 


Element, ProcessingInstruction, 
Comment, Text, CDATASection, 
EntityReference 


None 


图 7-3 nodeType 值 所 表示 的 类 型 
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nodeName 和 nodeValue 的 返回 值 也 会 根据 nodeType 的 不 同 有 很 大 差异 ,每 种 节点 类 型 对 
应 的 nodeName 和 nodeValue 值 如 图 7-4 所 示 。 


节点 类 型 nodeName 返回 nodeValue 返回 
1 Element 元 素 名 null 

2 Attr 属性 名 称 属性 值 

3 Text #text 节点 的 内 容 
4 CDATASection #cdata-section 节点 的 内 容 
5 EntityReference 实体 引用 名 称 null 

6 Entity 实体 名 称 null 

学 Processinglnstruction target 节点 的 内 容 
8 Comment #comment 注释 文本 

9 Document #document null 

10 | DocumentType 文档 类 型 名 称 null 

11 DocumentFragment #document 片段 null 

12 | Notation 符号 名 称 null 


图 7-4 nodeName 与 nodeValue 值 的 意义 


在 学 习 Element 对 象 中 定义 的 方法 之 前 ， 建 议 你 将 上 面 列 出 的 常用 属性 在 我 们 创建 的 工 
程 框架 中 编写 测试 一 下 。Element 对 象 中 定义 的 方法 是 操作 节点 的 基础 ， 除 了 上 面 的 代码 示 
例 中 演示 可 以 向 某 个 节点 内 追加 子 节点 ， 其 他 常用 方法 如 表 7-4 所 示 。 


表 7-4 ”Element 对 象 中 定义 的 其 他 方法 

















方法 名 意义 
cloneNode (deep) 复制 节点 
布尔 类 型 ， 表 示 是 否 克隆 属性 
getAttribute (name) 获取 节点 某 个 属性 的 值 
属性 字符 串 
getAttributeNode (name) 获取 节点 的 某 个 属性 节点 
属性 字符 串 
getElementsByTagName | (name) 获取 此 节点 下 所 有 子 节点 中 标签 名 为 参 
标签 名 数 指定 的 字符 串 的 节点 集合 
hasAttribute (name) 将 返回 布尔 值 , 判断 节点 是 否 有 某 个 属性 
属性 名 
hasAttributes 无 返回 布尔 值 ， 判 断 节 点 是 否 有 属性 
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( 续 表 ) 
方法 名 参数 意义 
hasChildNodes 无 返回 布尔 值 ， 判 断 节点 是 否 有 子 节点 
insertBefore (new,old) 在 指定 节点 前 插入 节点 
指定 在 old 节点 前 插入 新 节点 
isEqualNode (node) 返回 布尔 值 , 判断 两 个 节点 对 象 是 否 相 等 
节点 对 象 相等 的 条 件 : 
1. 节点 类 型 相同 
2. 拥有 相同 的 节点 名 、 节 点 值 等 
3. 子 节点 相同 
4. 拥有 相同 的 属性 和 属性 值 
isSameNode (node) 返回 布尔 值 
节点 对 象 判断 两 个 节点 是 否 相 同 
removeAttribute (name) 移 除 元 素 中 的 指定 属性 
属性 名 字符 串 
removeChild (node) 移 除 某 个 子 节点 
节点 对 象 
replaceChild (new,old) 蔡 换 某 个 子 节点 
节点 对 象 
setAttribute (name,value) 设置 元 素 的 属性 值 
name: 属性 名 
value: 属性 值 
setAttributeNode (node) 设置 元 素 属性 
属性 节点 对 象 








7-5 ”Attribute 属性 对 象 


在 网 页 开发 中 ，HTML 代 码 实际 上 是 页 面 的 框架 ， 比 如 哪 一 个 地 方 显示 标题 、 哪 一 个 地 
方 显 示 内 容 等 , 属性 则 是 对 框架 的 内 部 进行 完善 与 填充 , 比如 标题 要 显示 的 精准 位 置 在 哪里 、 
文本 配置 什么 样 的 颜色 等 。 在 整个 文档 树 中 ，HTML 标 签 节点 被 称 为 元 素 节点 ， 属 性 被 称 为 
属性 节点 ， 我 们 可 以 使 用 JavaScript 来 获取 具体 的 属性 节点 对 象 来 动态 操作 元 素 节 点 的 属性 。 

首先 新 建 一 个 HTML 文 件 用 来 作为 本 示例 的 测试 页 面 ， 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 


206 


第 7 章 ， JavaScript HTML DOM/BOM 


<title>Attribute 示例 </title> 


<head> 
<body> 

id="p" class="pClass" style="margin-left: 100px;color:red" myAttribute="Hello World"> 我 是 一 行 
人 P Pp Sty| argl 


文本 </p> 


<script type="text/javascript" src="../javaScript/attributeJs.js"></script> 
</body> 
</html> 


编写 JavaScript 文 件 如 下 : 
(function0O{ 


DO; 


let element = document.getElementById("p"); 

let attributes = element.attributes; 

console.log(attributes); // 集 合 对 象 ， 可 以 通过 下 标 或 者 属性 名 来 获取 具体 的 属性 节点 对 象 
let al = attributes[0]; 

console.log(al.name); /1/ 获 取 此 属性 节点 的 名 称 
console.log(al.value); // 获 取 此 属性 节点 的 值 
/重新 设置 属性 的 值 

al.value = "pp"; 

// 也 可 以 使 用 属性 名 来 获取 属性 节点 对 象 

let a2 = attributes["myAttribute"]; 

console.log(a2); 

let newArrtebute = document.createAttribute("newArrtebute"); 
newArrtebute.value = "new"; 

/添加 新 的 属性 

attributes.setNamedItem(newArrtebute); 

/删除 属性 


attributes.removeNamedItem("style"); 


上 面 代码 中 的 注释 十 分 清楚 ,属性 分 为 预 设 属性 和 自 定义 属性 , 无 论 哪 种 属性 , 我 们 都 
可 以 在 attributes 集 合 对 象 中 获取 ， 通 过 操作 Attribute 对 象 的 value 值 ， 我 们 可 以 灵活 地 改变 页 
面 的 行为 表现 。 需 要 注意 ，setNamedItem 和 removeNamedItem 是 定义 在 属性 集合 对 象 上 的 方 
法 ,通过 这 两 个 方法 可 以 对 Element 对 象 的 属性 进行 新 增 或 删除 ，Document 对 象 的 
createAttribute 方 法 可 以 创建 一 个 新 的 属性 节点 。 
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7-6 用 户 事件 


在 网 页 中 ,用 户 操作 网 页 产生 的 事件 被 称 为 Event 对 象 ， 比 如 用 户 对 键盘 鼠标 的 操作 ， 


对 页 面 元 素 的 选中 、 单 击 等 都 可 以 作为 事件 被 开发 者 监听 到 , 通过 JavaScript 来 对 用 户 的 行为 
进行 反馈 。 在 HTML 元 素 中 可 以 定义 许多 事件 属性 。 下 面 在 工程 模板 中 新 建 一 个 测试 网 页 ， 
演示 一 些 常用 的 事件 属性 。 
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编写 HTML 文 件 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title>Event 示例 </title> 
<script type="text/javascript" sre="../javaScript/eventJs.js"></script> 
</head> 
<body> 
<div style="margin: 100px"> 
<input type="text" name="text" onchange="inputChange(this.value)" /> 
<div id="click" onclick="divOnclick(this.id)"> 点 击 我 </div> 
<div id="dbclick" ondblclick="divOnfbclick(this.id)"> 双 击 我 </div> 
<input onkeydown="inputonkeydown(event)" value=" 请 按 下 键盘 按键 "/> 
<div onmousedown="divonmousedown(event)"> 鼠 标 按 下 </div> 
<div onmousemove="divonmousemove(event)"> 移 动 鼠标 </div> 
</div> 
</body> 
</html> 


编写 JavaScript 文 件 如 下 : 


function inputChange(value){ 
alert(" 输 入 框 修改 为 "+value); 





} 

function divOnclick(value){ 
alert(" 点 击 了 "+value); 

} 

function divOnfbclick(value){ 
alert(" 双 击 了 "+value); 


function inputonkeydown(e){ 
alert(" 按 下 了 "+e.key); 
} 


function divonmousedown(e){ 


alert(" 按 下 鼠标 "+"x:"+e.screenX+" y:"+screenY); 


} 


function divonmousemove(e){ 


alert(" 移 动 鼠标 "+"x:"+e.ScreenX+" y:"+screenY); 
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} 


在 浏览 器 中 运行 ， 可 以 看 到 相关 效果 ， 需 要 注意 ， 并 不 是 所 有 浏览 器 定义 的 event 对 象 
结构 都 一 致 , 如果 你 在 运行 时 有 疑惑 ,可 以 通过 调试 模式 来 看 event 对 象 的 结构 。 上 面 的 代码 
演示 的 是 HTML 元 素 上 可 以 绑 定 的 常用 的 一 些 事件 属性 。 表 7-5 列 出 了 其 他 常用 事件 属性 。 


表 7-5 HTML 元素 上 可 以 绑 定 的 常用 的 事件 属性 























事件 备注 

Onabort 图 像 加 载 中 断 时 触发 ， 只 有 img 元 素 支持 
Onblur 元 素 失去 焦点 时 触发 
Onerror 图 像 加 载 失败 时 触发 
Onfocus 元 素 获得 焦点 时 触发 
Onkeyup 键盘 按键 抬 起 时 触发 
Onload 页 面 或 图 像 加 载 完成 时 触发 
Onkeypress 键盘 按钮 按 下 并 抬 起 时 触发 
Onmouseout 鼠标 被 移 开 时 触发 
Onmouseover 鼠标 被 移动 到 某 元 素 上 触发 
Onmouseup 鼠标 按键 松 开 时 触发 
Onreset 重 置 按钮 被 点 击 时 触发 
Onresize 窗口 大 小 被 调整 时 触发 
Onselect 文本 被 选中 时 触发 
Onsubmit 确认 按钮 被 单 击 时 触发 


7-7 ”Event 事件 对 象 


上 一 示例 中 演示 了 如 何 为 HTML 元 素 添加 事件 , 演示 代码 里 也 涉及 event 对 象 , 当 事 件 触 
发 后 , 此 事件 的 行为 和 相关 属性 会 被 封装 成 event 对 象 传 入 开发 者 定义 的 回调 函数 , 例如 键盘 
按键 事件 ， 可 以 通过 这 个 对 象 获取 用 户 具体 操作 的 是 哪个 按钮 ， 如 果 是 鼠标 单 击 事件 ,那么 
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可 以 获取 用 户 单 击 的 是 鼠标 的 哪个 按键 。 表 7-6 列 出 了 event 对 象 中 一 些 常用 的 属性 ， 不 同 浏 
览 器 可 能 会 有 略微 差别 。 


表 7-6 event 对 象 常用 属性 





























属性 名 意义 
Key 键盘 按 下 的 键 
keyCode 按键 编码 
Button 鼠标 按键 
0: 左 键 
1: 中 间 键 
2: 右键 
clientX 鼠标 水 平 位 置 
clientY 鼠标 垂直 位 置 
ctrIKey 事件 触发 时 Ctrl 键 是 否 按 下 ， 布 尔 值 
altKey 事件 触发 时 Alt 键 是 否 按 下 ， 布 尔 值 
metaKey 事件 触发 时 Meta 键 是 否 按 下 ， 布 尔 值 
screenX 水 平 坐标 
screenY 垂直 坐标 
shiftKey 事件 触发 时 Shif 键 是 否 按 下 
Target 触发 此 事件 的 元 素 
Type 事件 名 称 
Bubbles 获取 事件 是 否 是 冒 泡 时 间 ， 布 尔 值 


7-8 关于 事件 传递 


HTML 文 档 中 的 元 素 往往 存在 父子 关系 , 我 们 经 常会 遇 到 父 元 素 和 子 元 素 都 可 以 接收 事 
件 的 情况 。 在 浏览 器 中 ， 处 理事 件 的 方式 一 般 有 两 种 : 事件 冒 泡 与 事件 捕获 。 

事件 冒 泡 是 指 当 用 户 事件 发 生 时 , 最 内 层 的 子 元 素 先进 行 处 理 , 然后 传递 到 上 层 的 父 元 
素 ,一 层 一 层 向 上 传递 。 事 件 捕获 是 指 当 用 户 事件 发 生 时 ,最 外 层 的 父 元 素 先进 行 处 理 ， 然 
后 传递 到 子 元 素 , 一 层 一 层 向 下 传递 。 如 果 你 使 用 的 是 Google Chrome 浏 览 器 ， 可 以 用 如 下 
代码 来 测试 事件 冒 泡 : 

<!DOCTYPE html> 

<html> 

<head> 

<title> 事 件 冒 泡 与 事件 捕获 </title> 
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</head> 
<body> 
<div id="div1" onclick="alert(this.id)"> 
<div id="div2" onclick="alert(this.id)"> 
<div id="div3" onclick="alert(this.id)"> 


请 点 击 我 
</div> 
</div> 
<div> 
</body> 
</html> 


需要 注意 , 并 不 是 所 有 的 场景 都 需要 事件 冒 泡 传递 , 如 果 你 想 让 某 一 个 元 素 处 理 过 事件 
后 不 再 进行 传递 ， 可 以 调用 事件 对 象 的 stopPropagation 方 法 。 例 如 ， 上 面 的 示例 代码 可 以 改 
写 如 下 ， 这 样 便 上 只 有 id 为 div3 的 元 素 会 接收 到 事件 : 


<!DOCTYPE html> 
<html> 
<head> 

<title> 事 件 冒 泡 与 事件 捕获 </title> 
</head> 
<body> 
<div id="div1" onclick="alert(this.id)"> 

<div id="div2" onclick="alert(this.id)"> 

<div id="div3" onclick="alert(this.id);event.stopPropagation()"> 


请 点 击 我 
</div> 
</div> 
</div> 
</body> 
</html> 


7-9 简单 的 轮 播 广告 


通过 对 前 面 知识 的 学 习 ， 你 应 该 已 经 具备 使 用 JavaScript 开 发 简单 网 页 逻辑 的 能 力 。 本 
示例 将 演示 一 个 简易 的 轮 播 广告 图 的 开发 过 程 。 
轮 播 广告 是 网 页 中 十 分 常用 的 一 种 组 件 ,其 通常 表现 为 间隔 一 段 时 间 后 就 会 变换 广告 内 
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容 , 并 且 支 持 用 户 手动 进行 广告 的 切换 。 首先 在 项 目 工程 中 新 建 一 个 src 文 件 夹 , 将 广告 素材 
放 入 其 中 ， 编 写 HTML 文 件 如 下 : 


<!DOCTYPE html> 


<html> 
<head> 
<title> 轮 播 图 </title> 
<style type="text/css"> 
#ad{ 
width: 100%; 
height: 350px; 
} 
#left{ 
width: 30px; 
height: 70px; 
position: absolute; 
top:140px; 
} 
#right{ 
width: 30px; 
height: 70px; 
position: absolute; 
right:8px; 
top:140px; 
} 
#container{ 
height: :350px; 
} 
</style> 
</head> 
<body> 


<div id="container"> 
<img id="left" src="../src/left.png" onclick="left()" /> 
<img id="right" sre="../src/right.png" onclick="right()" /> 
<img id="ad" src="../src/1.jpg" 这 
<script type="text/javascript" sre="../javaScript/sliderAD.js"></script> 
</div> 
</body> 
</htmP> 
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编写 JavaScript 文 件 如 下 : 


(functionO{ 

let adImageElement = document.getElementByld("ad"); 

document.index = 1; 

setInterval(function(){ 
if (document.index>=3) { 

document.index=1; 

adImageElement.setAttribute("sre","../src/"+document.index+".jpg"); 
document.indext++; 

},6000); 

D0; 
function left(){ 

let adImageElement = document getElementById("ad"); 

if (document.index>1) { 
document.index--; 
adImageElement.setAttribute("sre","../src/"+document.index+".jpg"); 

1 
function rightO{ 

let adImageElement = document getElementById("ad"); 

if (document.index<3) { 
document.index++; 
adlmageElement.setAttribute("sre","../src/"+document.index+".jpg"); 


| 

在 浏览 器 中 运行 , 可 以 看 到 轮 播 广告 图 已 经 可 以 正常 工作 。 需 要 注意 , 我 们 的 轮 播 广告 
二 分 简易 ， 内 容 的 转换 也 非常 生硬 ， 你 可 以 利用 互联 网 查找 一 下 如 何 使 用 CSS3 来 添加 过 滤 
动画 。 


7-10 Window 窗口 对 象 


Window 对 象 用 来 描述 浏览 器 窗口 ， 使 用 它 可 以 方便 地 获取 浏览 器 窗口 的 相关 信息 ， 其 
中 常用 属性 如 表 7-7 所 示 。 
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表 7-7 Window 对 象 的 常用 属性 









































属性 名 十、 尺 

Document 获取 页 面 文档 对 象 

History 获取 窗口 历史 对 象 

Innerheight 获取 页 面 文档 显示 区 的 高 度 

Innerwidth 获取 页 面 文档 显示 区 的 宽度 

Location 获取 窗口 的 地 址 对 象 

Name 获取 窗口 的 名 称 

Navigator 获取 窗口 的 导航 对 象 

Opener 获取 打开 当前 窗口 的 父 窗口 

Outerheight 获取 窗口 的 外 部 高 度 

Outerwidth 获取 窗口 的 外 部 宽度 

pageXOffset 获取 当前 页 面相 对 于 窗口 显示 区 的 水 平 偏 移 
pageYOffset 获取 当前 页 面相 对 于 窗口 显示 区 的 垂直 偏 移 
Parent 获取 父 窗口 

Screen 获取 窗口 的 屏幕 对 象 


表 7-8 列 出 了 Window 对 象 定义 的 常用 方法 ， 需 要 注意 ， 这 些 方法 可 以 使 用 Window 对 象 
来 调用 ， 也 可 以 直接 调用 。 


表 7-8 ”Window 对 象 定义 的 常用 方法 














方法 名 参 数 意 义 

Alert (msg) 弹出 一 个 警告 框 
msg: 警告 消息 字符 串 

Blur 天 将 用 户 焦 点 从 窗口 移 开 

setInterval (func,mill) 以 一 定 的 周期 来 执行 回调 函数 , 会 返回 定 
func: 回调 函数 时 器 id 值 


mill: 执行 间隔 ， 毫 秒 
setTimeout (func,milD) 

func: 回调 函数 

mil: 延 时 时 间 ， 毫 秒 





延 时 一 定时 间 后 执行 回调 函数 , 会 返回 定 
时 器 id 值 














clearInterval | (id) 取消 循环 定时 器 
id: 定时 器 id 值 

clearTimeout | (id) 取消 延 时 定时 器 
id: 定时 器 id 值 
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( 续 表 ) 
方法 名 参 数 意义 
Close 无 关闭 自身 窗口 , 需要 注意 , 这 个 方法 只 能 
关闭 由 open 方法 打开 的 窗口 
Open (url,name,fea,rep) 打开 一 个 新 的 窗口 , 可 以 设置 其 名 称 和 属 
url: 打开 新 窗口 的 地 址 性 
name: 打开 新 窗口 的 名 称 
fea: 窗口 特性 配置 字符 串 ， 后 边 会 介绍 
rep: 布尔 值 ， 设 置 新 装载 的 窗口 URL 是 
否 蔡 换 浏览 历史 中 的 当前 条 目 
Confirm (msg) 弹出 一 个 确认 框 , 会 自 带 “确认 ”和 “ 取 
msg: 消息 字符 串 消 ” 两 个 按钮 ， 如 果 用 户 选择 “确认 ” 按 
钮 ， 会 返回 tue; 如 果 用 户 选择 “取消 ” 
按钮 ， 会 返回 false 
moveBy (xy) 将 窗口 向 右 下 方 移动 
x: 水 平移 动 像素 数 
y: 垂直 移动 像素 数 
moveTo (xy) 将 窗 后 移动 到 指定 的 位 置 
x: 水 平移 动 像素 数 
y: 水 平移 动 像素 数 
Print 天 打印 当前 页 面 
Prompt (text,defaultText) 弹出 一 个 用 户 输入 框 ， 包 含 一 个 “确认 ” 
text: 对 话 框 标题 按钮 和 一 个 “取消 ”按钮 ， 如 果 用 户 单 击 
defaultText: 输入 框 中 的 默认 文本 “确认 ”按钮 , 就 会 返回 用 户 输入 的 文字 ; 
如 果 用 户 单 击 “ 取 消 ” 按 钮 , 就 会 返回 null 
resizeBy (width,height) 调整 窗口 尺寸 
width: 增加 宽度 
height: 增加 高 度 
resizeTo (width,height) 调整 窗口 尺寸 到 
width: 宽度 
height: 高 度 
scrollBy Coy) 将 当前 页 面 进行 滚动 控制 
x: 水 平 偏 移 
y: 垂直 偏 移 
scrollTo (%y) 将 当前 页 面 滚动 到 指定 位 置 
x: 水 平 坐标 
y: 垂直 坐标 
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前 面 有 提 到 ， 在 使 用 open 方 法 打开 窗口 时 ， 我 们 可 以 为 其 配置 一 个 属性 字符 串 ， 例 如 
"width=200.height=200"， 这 样 会 将 打开 的 窗口 尺寸 设置 为 宽 高 均 为 200 像 素 ， 可 配置 的 属性 
字段 如 图 7-5 所 示 。 


channelmode=yeslnolllo 是 否 使 用 剧院 模式 显示 窗口 。 默 认为 no 


directories=yeslnohlo 是 否 添加 目录 按钮 。 默 认为 yes 
fullscreen=yeslnollo 是 否 使 用 全 屏 模式 显示 浏览 器 。 默 认 是 no。 处 于 全 屏 模式 的 窗口 必须 同时 处 于 剧院 模式 
height=pixels 窗口 文档 显示 区 的 高 度 。 以 像素 计 
left=pixels 窗口 的 x 坐标 。 以 像素 计 
location=yeslnollo 是 否 显示 地 址 字段 。 默 认 是 yes 
menubar=yeslnollo 是 否 显示 菜单 栏 。 默 认 是 yes 
resizable=yeslnohlo 窗口 是 否 可 调节 尺寸 。 默 认 是 yes 
scrollbars=yeslnoll0 是 否 显示 滚动 条 。 默 认 是 yes 
status=yeslnoll0 是 否 添加 状态 栏 。 默 认 是 yes 
titlebar=yeslnollo 是 否 显示 标题 栏 。 默 认 是 yes 
toolbar=yeslnohlo 是 否 显示 浏览 器 的 工具 栏 。 默 认 是 yes 
top=pixels 窗口 的 y 坐标 

width=pixels 窗口 的 文档 显示 区 的 宽度 。 以 像素 计 


图 7-5 打开 窗口 可 配置 的 窗口 属性 字段 


7-11 ”Navigator 导航 对 象 


Navigator 导 航 对 象 中 包含 浏览 器 的 相关 信息 , 使 用 它 可 以 获取 浏览 器 的 名 称 、 版 本 、 平 
台 等 信息 。 表 7-9 列 出 了 Navigator 对 象 中 的 常用 属性 。 


表 7-9 Navigator 对象 中 的 常用 属性 
































属性 名 意 义 

appCodeName 获取 浏览 器 的 代码 名 

appName 获取 浏览 器 的 名 称 

appVersion 获取 浏览 器 平台 和 版 本 信息 
cookieEnabled 获取 浏览 器 是 否 开启 Cookie 支持 
onLine 获取 浏览 器 当前 是 否 是 非 脱 机 模式 
Platform 获取 浏览 器 当前 运行 的 操作 系统 平台 
USerAgent 获取 浏览 器 用 户 请 求 的 用 户 代理 头 的 值 
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如 果 要 检查 当前 浏览 器 是 否 启 用 Java， 可 以 使 用 JavaEnabled 函 数 ， 如 果 返 回 tue， 表 示 


支持 ;如 果 返 回 false， 表 示 不 支持 。 


7-12 ”Screen 屏幕 对 象 


Screen 对 象 中 包含 显示 屏 的 相关 信息 ， 通 过 它 可 以 更 加 方便 地 对 新 窗口 进行 定位 ， 也 可 
以 根据 屏幕 的 分 辨 率 选择 合适 的 图 片 显示 给 用 户 。 其 中 ,常用 属性 如 表 7-10 所 示 。 


表 7-10 Screen 的 常用 属性 














属性 名 意义 

availHeight 获取 可 显示 区 域 高 度 
avail Width 获取 可 显示 区 域 宽度 
colorDepth 获取 颜色 比特 深度 
height 获取 显示 屏 的 高 度 
width 获取 显示 屏 的 宽度 
pixelDepth 获取 颜色 分 辩 率 


7-13 ”History 历史 对 象 


History 对 象 中 包含 用 户 在 当前 窗口 所 访问 过 的 URL 历 史 , 并且 开 发 者 可 以 使 用 这 个 对 象 
来 控制 页 面 的 前 进 与 后 退 。History 对 象 中 有 一 个 名 为 length 的 属性 ， 这 个 属性 可 以 获取 当前 
窗口 历史 中 有 多 少 个 URL。 需要 注意 ,出 于 隐私 考虑 ，History 对 象 并 不 能 直接 获取 用 户 所 加 
载 过 的 URL， 只 能 使 用 相关 方法 来 控制 页 面 的 跳 转 。 表 7-11 列 出 了 History 对 象 的 常用 方法 。 


History 对 象 的 常用 方法 


意义 





(numlurl) 


进行 历史 页 面 跳 转 


参数 可 以 是 一 个 整数 值 ， 也 可 以 是 一 个 URL 字符 串 ， 如 


果 是 整数 值 ， 就 表示 跳 转 到 相对 当前 位 置 偏 移 参数 数值 
的 某 个 URL, 例如 传 入 -1, 表示 跳 转 到 上 一 个 URL 页 面 。 
若 传 入 URL 字符 串 ， 则 会 直接 跳 转 到 此 URL 
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( 续 表 ) 
方法 名 | 参 数 意 义 

Back ”| 无 加 载 前 一 个 URL( 如 果 存 在 ) 
Forward | 无 加 载 后 一 个 URL( 如 果 存 在 ) 


7-14 ”Location 地 址 对 象 


Location 对 象 是 对 当前 URL 信 息 的 封装 ， 并 且 提 供 了 方法 用 来 重新 加 载 或 者 替换 当前 页 
面 的 URL。 其 中 ,常用 属性 如 表 7-12 所 示 。 


表 7-12 ”Location 对象 的 常用 属性 














属性 名 意义 

Host 设置 或 返回 当前 页 面 的 主机 名 和 端口 号 ， 如 果 是 设置 ， 就 会 重新 加 载 页 面 
Hostname 设置 或 返回 当前 的 主机 名 

Href 设置 或 返回 当前 页 面 的 完整 URL 

Pathname 设置 或 返回 当前 URL 的 路 径 部 分 

Port 设置 或 返回 当前 URL 的 端口 号 

Protocol 设置 或 返回 当前 URL 的 协议 

Search 设置 或 返回 当前 URL 的 参数 部 分 





表 7-13 给 出 了 Location 对 象 几 个 常用 的 加 载 URL 的 方法 。 


表 7-13 Location 常用 的 加 载 URL 的 方法 


方法 名 | 参数 | 意义 








Assign (url) 加 载 新 的 文档 
Reload ”| 无 | 重新 加 载 当前 文档 
Replace (urD 加 载 新 的 文档 , 与 Assign 方法 不 同 的 是 , 这 个 方法 不 会 在 History 中 生 


成 新 的 记录 ， 只 会 昔 换 当前 的 URL 





7-15 “编程 练习 


练习 1: 给 定 一 个 ul 列表 ， 单 击 每 个 列表 中 的 1 项 删除 此 1i 项 。 
解析 : 
参考 代码 如 下 : 
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<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<ul id="list"> 
<l>1</> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
</ul> 
</body> 
<script type="application/javascript"> 
window.onload = function() { 
var list = document.getElementsByTagName("ul")[0].childNodes; 
for (vari= 0;i< list.length; i++) { 
list[i].onclick = function() { 
this.parentNode.removeChild(this); 
1 
} 
} 
</script> 
</htm> 
练习 2: 给 定 一 个 ul 列表 ， 单 击 其 中 最 后 一 个 li 元 素 后 动态 追加 li。 
解析 : 
参考 代码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
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<ul id="list"> 
<li>1</> 
<li>2</l> 
<l>3</I> 
<li>4</li> 
<li>5</li> 
</ul> 
</body> 


| 


<script type="application/javascript"> 
window.onload = function() { 
var list = document.getElementsByTagName("li"); 
var li = list[list.length-1]; 
li.onclick = function funcO { 
var lii= document.createElement('li"); 
liiinnerHTML = list.length+1; 
lii.onclick = func; 
this.parentNode.appendChild(lii); 
} 


} 
</script> 
</html> 


练习 3: 给 定 一 个 ul 列表 , 单 击 其 中 某 个 1i 元 素 后 ， 和 其 下 一 个 元 素 进行 交换 ， 如 果 没 有 
下 一 个 元 素 ， 就 和 上 一 个 元 素 进 行 交换 。 

解析 : 

参考 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<ul id="list"> 
<l>1</I> 
<li>2</li> 
<li>3</i> 
<l>4</l> 
<li>5</li> 
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</ul> 
</body> 
<script type="application/javascript"> 
window.onload = function() { 
var list = document.getElementsByTagName("li"); 
var l= document.getElementById('list'); 
for (let i= 0;i<list.length;i++) { 
list[i].onclick = function func() { 
让 (一 list.length-1){ 
linsertBefore( list[i],list[i-1]); 
jelse{ 
linsertBefore( list[i+1 ],list[i]); 





} 
</script> 
</html> 
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通过 前 面 儿 个 章节 的 学 习 ， 相 信 你 已 经 掌握 了 JavaScript 语 言 的 核心 语法 ,并 且 有 了 操 
作 HTML 元 素 的 能 力 。 本 章 将 更 多 地 综合 运用 前 面 所 学 习 的 知识 进行 两 个 简单 有 趣 的 小 项 目 
的 实战 开发 。 通 过 学 习 本 章 内 容 ， 你 的 JavaScript 运 用 能 力 将 会 得 到 进一步 提高 。 


8-1 项 目 一 : 编写 一 个 简易 网 页 时 钟 


你 一 定 见 过 各 式 各 样 的 电子 时 钟 , 有 没有 想 过 自己 来 开发 一 款 呢 7 其 实 编写 一 个 简易 的 
网 页 时 钟 应 用 十 分 简单 。 例 如 ，HTML 5 的 Canvas 标 签 可 以 随心 所 欲 地 在 网 页 上 绘制 自 定 义 
的 图 形 。 本 实战 项 目 将 教 你 如 何 一 步 一 步 地 实现 一 款 简易 的 网 页 时 钟 ， 实 现 的 效果 如 图 8-1 
所 示 。 

需要 注意 , 我 们 要 实现 的 时 钟 并 不 是 静态 的 , 会 根据 当前 的 系统 时 间 实 时 走动 。 我 们 只 
需要 使 用 定时 器 进行 刷新 绘制 即 可 实现 。 
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简易 时 钟 





Wed Mar 28 2018 


图 8-1 简易 网 页 时 钟 效果 
8-1-1 关于 Canvas 标签 


在 编写 时 钟 界面 前 , 你 首先 要 对 Canvas 标 签 有 个 初步 的 了 解 。HTML 5 中 提供 了 <canvas> 
标签 来 进行 图 像 的 绘制 ， 当 然 需要 通过 JavaScript 脚 本 来 进行 操作 。 

Canvas 相 当 于 一 张 画 布 ， 当 你 需要 向 画布 上 绘制 内 容 时 ， 需 要 先 获 取 绘 制 上 下 文 对 象 ， 
例如 在 界面 上 画 出 一 个 矩形 图 形 ， 可 以 使 用 如 下 代码 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<canvas id='canvas></canvas> 
</body> 
<script type="application/javascript"> 





let context = document.getElementByld('canvas').getContext("2d"); 
context.rect(30,30,100,100); 
context.fillStyle = 'red' 
context.fill(); 
</script> 
</htm> 


上 面 的 代码 中 , getContext("2d") 用 来 获取 绘制 上 下 文 ;rect0 函 数 用 来 添 加 一 个 矩形 图 形 ， 
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其 中 4 个 参数 分 别 对 应 矩形 的 x 坐 标 、y 坐 标 、 宽 度 和 高 度 ; fillStyle 属 性 用 来 设置 填充 的 风格 ， 
可 以 用 来 设置 绘制 的 颜色 ; fill0 函 数 用 来 对 添加 到 绘制 上 下 文中 的 图 形 进行 泻 染 绘制 。 

在 绘制 图 形 时 , 除了 可 以 设置 颜色 外 , 还 有 许多 属性 可 以 供 我 们 使 用 , 例如 阴影 、 边框、 
模糊 等 效果 ， 示 例 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<canvas id='canvas'></canvas> 
</body> 
<script type="application/javascript"> 
let context = document.getElementByld('canvas').getContext("2d"); 
context.rect(30,30,100,100); 
// 设 置 线条 颜色 
context.strokeStyle = 'blue'; 
// 设 置 填充 颜色 
context.fillStyle = red'; 
// 设 置 阴影 颜色 
context.shadowColor = 'green'; 
// 设 置 阴影 X 偏 移 
context.shadowOffsetX = 10; 
// 设 置 阴影 Y 偏 移 
contextshadowOffsetY = 10; 
// 设 置 线条 宽度 
context.lineWidth = 3; 
// 进 行 填充 绘制 
context.fill(); 
// 进 行 边框 绘制 
context.stroke(); 
</script> 
</htmb> 


绘制 效果 如 图 8-2 所 示 。 
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图 8-2 图形 绘 制 效果 


除了 和 矩形 外 ， 你 也 可 以 绘制 任意 路 径 的 图 形 ，beginPath()、moveTo() 和 closePath()3 个 函 
数 用 来 绘制 闭合 图 形 ， 例 如 绘制 三 角形 的 核心 代码 如 下 : 

context.beginPath(); 

context.moveTo(30,30); 

context.lineTo(30,150); 

context.lineTo(100,150); 

context.closePath(); 

context.stroke(); 


弧 线 和 国 的 绘制 方法 也 十 分 简单 ， 核 心 代码 如 下 : 
context.arc(100,100,80,0,Math.PI*2,false); 
context.fill|); 
arc() 函 数 中 的 6 个 参数 分 别 用 来 设置 圆心 坐标、 圆心 坐标、 半径 、 起 点 弧度 值 、 终 点 
弧度 值 和 是 否 逆 时 针 绘 制 。 上 面 代码 的 绘制 效果 如 图 8-3 所 示 。 





图 8-3” 圆 形 绘制 效果 


关于 文本 的 绘制 可 以 采用 fillText0 或 者 strokeText0 函 数 ， 这 里 就 不 再 一 一 列举 。 使 用 
Canvas 也 可 以 十 分 轻松 地 绘制 出 渐变 图 形 ， 在 后 面 的 时 钟 实战 中 会 有 应 用 。 


8-1-2 制作 简易 网 页 时 钟 
网 页 时 钟 的 参考 代码 如 下 : 
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<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 时 钟 </title> 
</head> 
<body> 
<div style="text-align: center;"><h1> 简 易 时钟 </h1></div> 
<div style="text-align: center;"><canvas id="one" width="800" height="500"></canvas></div> 
id="date"></div> 





<div style="text-align: center; font-size: 35px; 
<script> 
var date = document.getElementByld("date"); 
var d = new Date(); 
/获取 当前 日 期 字符 串 
date.innerText = d.toDateString(); 
var one=document.getElementByld("one"); 
var context=one.getContext("2d"); 
function clockO { 
context.clearRect(0,0,800,800):; // 清 除 画 布 
// 著 取 当前 时 间 
var sec=new Date().getSeconds(); 
var min=new Date().getMinutes(); 
var hour=new Date().getHours(); 
// 设 置 表盘 
// 圆 形 渐变 色 参 数 分 别 为 两 个 圆心 和 半径 
var gl = context.createRadialGradient(400, 250, 0, 400, 250, 200); 
/设置 两 个 渐变 色 的 参数 
gl.addColorStop(0, "#fcfcfe"):; 
gl.addColorStop(1, "#defdff); 
/设置 线 宽 
contextlineWidth = 2; 
context.fillStyle = gl1; 
context.beginPath(); 
// 绘 制 圆 盘 
context.arc(400, 250, 200, 0,360, false); 
context.closePath(); 
context.fill(); 
context.stroke(); 
context.fillStyle="yellow"; 
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context.beginPath(); 

/绘制 表 芯 

context.arc(400,250, 10,0,360, false); 
context.closePath(); 

context.fill(); 

// 时 针 刻 度 盘 


for(vari=0;i<12;i++){ 


context.save(); 

// 将 坐标 原点 位 置 移动 到 圆心 处 
context.translate(400, 250); 

/将 表盘 旋转 
context.rotate(1*30*Math.PI/1 80); 
context.beginPath(); 
contextmoveTo(0, -200); 
context.lineTo(0, -180); 


context.closePath(); 
context.stroke(); 
context.restore(); 

} 

// 分 针 刻 度 盘 和 秒针 刻度 盘 


for (vari=0;i<60;i+t+){ 


if (i1%5!=0) { 
context.save(); 
context.strokeStyle="red"; 
context.translate(400, 250); 
1/ 旋转 表盘 
context.rotate(i*6*Math. Pl/180); 
context.beginPath(); 
context.moveTo(0, -200); 
context.lineTo(0, -190); 
context.closePath(); 


context.stroke(); 
context.restore(); 
} 
} 
context.save(); 


context.fillStyle="black"; 


var hours=[3,4,5,6,7,8,9,10,11,12,1,2]; 
context.font="26px pxArial" 
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/定义 时 间 数 组 
/字体 和 字体 大 小 
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context.textAlign='center'; 
context.textBaseline='middle'; 
// 画 时 刻 
hours.forEach(function(number,i){ 
var rad=2*Math.Pl/12*i; 
Var x=Math.cos(rad)*(200-30)+400; 
var y=Math.sin(rad)*(200-30)+250; 
context.fillText(number,x,y); 
六 
context.stroke(); 
context.restore(); 
1/ 秒针 
context.save(); 
context.fillStyle="red"; 
context.translate(400, 250); 
context.rotate(sec*6*Math.P1/180); 
context.beginPath(); 
context.moveTo(0, -170); 
context.lineTo(-5, -30); 
context.lineTo(0, -10); 
contextlineTo(S, -30); 
context.closePath(); 
context.fill(); 
context.restore( ); 
// 分 针 
context.save(); 
context.fillStyle="blue"; 
context.translate(400,250); 
context.rotate(min*6*Math.PI/180); 
context.beginPath(); 
contextmoveTo(0, -150); 
context.lineTo(-5, -30); 
contextlineTo(0, -10); 
context.lineTo(5, -30); 
context.closePath(); 
context.fill(); 
context.restore(); 
/时 针 


context.save(); 


// 数 字 相 对 圆心 左右 两 边 居中 
// 数 字 相 对 圆心 上 线 两 边 居中 





/把 圆 分 为 12 个 弧度 
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contextlineWidth=2; 
contextfillStyle= "black"; 
context.translate(400,250); 
context.rotate(hour*30*Math.P1/1 80); 
context.beginPath(); 
context.moveTo(0, -130); 
context.lineTo(-8,-30); 
context.lineTo(0,-10); 
context.lineTo(8,-30); 
context.closePath(); 
context.fill(); 
context.restore(); 
} 
clock(); 
setInterval(clock,1000); 
</script> 
</body> 
</html> 
上 面 的 代码 有 比较 详尽 的 注释 , 本 实战 练习 的 编写 难度 并 不 大 , 主要 是 一 些 简单 的 数学 
角度 计算 和 使 用 JavaScript 对 Canvas 的 操作 。 但 是 实现 的 效果 是 十 分 炫 酷 的， 如 果 你 觉得 
JavaScript 只 能 用 来 做 一 些 界面 和 动画 , 那 你 就 错 了 。 下 一 个 实战 项 目 将 一 起 来 实现 一 个 网 页 
笑话 阅读 器 。 


8-2 项 目 二 : 编写 网 页 笑话 阅读 器 


本 实战 项 目 将 开发 一 款 简单 的 网 页 阅读 器 App。 使 用 JavaScript 开 发 网 页 的 一 个 非常 大 的 
优势 是 将 以 前 复杂 的 服务 端 罗 辑 分 担 在 了 客户 端 。Ajax 技 术 结 合 JavaScript 脚 本 可 以 开发 出 体 
验 十 分 优秀 的 网 页 应 用 。 

在 前 面 的 章节 中 , 我 们 一 直 没有 使 用 网 络 技术 , 本 节 将 通过 网 络 请 求 获取 有 趣 的 图 文 资 
源 来 进行 展示 ， 因 此 ， 在 开始 之 前 ， 我 们 需要 一 个 服务 端 来 提供 实时 更 新 的 资源 。 


8-2-1 通过 互联 网 获取 免费 的 应 用 数据 


互联 网 上 有 许多 数据 供应 商会 提供 免费 的 数据 ， 我 们 可 以 使 用 这 些 数据 来 练习 与 学 习 。 
易 源 数据 网 是 一 个 很 不 错 的 数据 交易 平台 ， 其 网 址 为 : https://www.showapi.com/， 如 果 你 没 
有 易 源 数据 网 的 会 员 账号 ， 需 要 先 注 册 一 下 ， 注 册 的 过 程 是 免费 的 。 
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注册 完 账号 ， 登 录 成 功 后 ,你 可 以 在 首页 的 搜索 栏 中 输入 “笑话 ”来 搜索 本 实战 应 用 需 
要 使 用 的 数据 服务 ， 如 图 8-4 所 示 。 


易 源 数 据 
| 计 荧 模式 升级 响 ! 
ps hs 
由 玉 全 费用 更 便宜 ， 海 量 数据 任性 用 





图 8-4 进行 数据 服务 搜索 


你 会 在 搜索 结果 中 找到 “笑话 大 全 ”服务 ， 它 就 是 我 们 所 需要 的 接口 服务 , 并 且 可 以 免 
费 使 用 ， 如 图 8-5 所 示 


x 加 





3 笑话 大 全 EIED 











图 8-5 使 用 “笑话 大 全 ”服务 


进入 笑话 大 全 服务 ， 单 击 界面 上 的 “订购 ”， 之 后 即 可 使 用 此 服务 的 接口 。 
“笑话 大 全 ”服务 中 提供 了 3 个 接口 ， 分 别 用 来 获取 文本 类 笑话 、 图 片 笑 话 和 动态 图 笑 
话 ， 本 实战 只 需要 使 用 前 两 个 接口 。 
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接口 服务 详情 页 里 面 有 详情 的 参数 文档 和 返回 数据 的 数据 结构 文档 ， 参 数 文档 如 图 8-6 
所 示 。 








参数 名 称 类 型 示例 值 必须 ” 挤 述 

showapi_appid String 100 是 易 源 应 用 id 

showapl_sign Suing 人 身份 ， 以 及 确保 参数 不 被 中 间 人 管 改 ， 需 要 传送 酒 用 者 的 数字 签名 。 
堵 户 证 时 间 . 
格式 YyyyMIMM， 14142239 










showapl_timestamp String 2014114142239 否 平台 只 接 要 在 10 分 钟 之 内 的 请 求 。 如 果 不 传 吧 传 空 浊 ， 





sting md5 理 
Sting 1a0 否 

参数 名 称 类 型 默认 值 示例 什 必须 ”描述 

page Strng 1 否 。 葛 几 页 

maxResult String 20 20 理 。 每 页 量 大 记录 数 。 其 信 为 [至 50 








图 8-6 ”接口 服务 的 参数 文档 

从 文档 中 可 以 看 到 ，showapi_appid 和 showapi_sign 两 个 参数 是 必 传 的 ， 这 两 个 参数 用 来 

进行 请 求 者 身份 的 验证 。 在 易 源 数据 网 的 个 人 中 心中 ， 你 可 以 查看 自己 的 appId 和 sign 密 钥 ， 
如 图 8-7 所 示 。 


我 的 应 用 CT 
mm [= | 











图 8-7 查看 自己 的 appId 和 密 钥 的 值 
下 面 可 以 测试 一 下 ， 打 开 浏 览 器 ， 在 地 址 栏 中 输入 如 下 地 址 : 


http://route.showapi.com/341-2?showapi_appid=58027&showapi_sign=74b9fcd59b844b98b 
6427da974f4e2e9 
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需要 注意 ， 上 面 的 地 址 拼接 的 showapi_appid 和 showapi_sign 的 值 需要 换 成 你 自己 在 个 人 
中 心 查找 到 的 相关 值 。 访 问 这 个 地 址 ， 如 果 有 数据 返回 ， 如 图 8-8 所 示 ， 就 说 明 你 的 数据 服 
务 已 经 可 以 使 用 。 


€ 了 CO routeshowepicom341-2?showapi appid=580278showaplsign=74b9tcd59bi 
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图 8-8 返回 数据 示例 


8-2-2 关于 AJAX 


学 习 JavaScript 编 程 , AJAX 是 必须 学 习 的 一 种 技术 -.AJAX 全 称 为 Asynchronous JavaScript 
and XML， 也 可 以 解释 为 异步 的 JavaScript 和 XML 技术 。 它 是 一 种 在 不 重新 加 载 整个 页 面 的 
情况 下 与 服务 器 交换 数据 的 技术 , 配合 JavaScript HTML DOM 技 术 可 以 实现 实时 的 网 页 局 部 
加 载 或 更 新 ， 使 得 网 页 更 加 动态 ， 用 户 体验 更 加 精致 。 

AJAX 技 术 的 核心 在 于 XMLHttpRequest 对 象 ， 它 是 HTTP 请 求 对 象 ， 使 用 它 来 进行 请 求 
的 配置 、 发 送 、 数 据 的 接收 等 。 例 如 ， 我 们 使 用 AJAX 来 获取 上 面 的 接口 的 数据 ， 代 码 示例 
如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
</body> 
<script type="application/javascript"> 


232 


第 8 章 JavaScript 项 目 实战 


var request = new XMLHttpRequest(); 
request.open("GET","http://route.showapi.com/341-2?showapi appid= 
58027&showapi_sign= 74b9fcd59b844b98b6427da974f4e2e9",true); 
request.send(); 
</script> 
</htmP> 


open0) 函 数 用 来 打开 一 个 请 求 ， 其 第 1 个 参数 设置 请 求 的 方法 ,常用 的 有 “GET” 和 
“POST 方法 ; 第 2 个 参数 设置 请 求 的 URL; 第 3 个 参数 设置 是 否 异 步 请 求 , 如 果 设 置 为 true， 
那么 请 求 的 进行 不 会 阻塞 后 面 JavaScript 脚 本 代码 的 执行 , 如 果 设置 为 false, 那么 只 有 请 求 结 


果 返 回 ， 脚 本 代码 才 会 向 后 执行 。 最 后 ， 不 要 忘 了 调用 send(0) 函 数 来 进行 请 求 的 发 送 。 


在 Chrome 浏 览 器 中 运行 代码 ， 打 开 开 发 者 工具 ， 在 其 中 的 网 络 模块 可 以 看 到 请 求 的 发 


送 和 接收 到 的 数据 ， 如 图 8-9 所 示 。 


下 面 使 用 XMLHttpRequest 对 象 的 回调 函数 来 接收 获取 到 的 数据 ， 修 改 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
</body> 
<script type="application/javascript"> 
var request = new XMLHttpRequest(); 
request.onreadystatechange = function(){ 
if(request.readyState=——4 && request.status==200){ 
document.body.innerText = request.responseText; 


} 
request.open("GET","http://route.showapi.com/341-27?showapi_appid= 
58027&showapi_sign= 74b9fcd59b844b98b6427da974f4e2e9",true); 
request.send(); 
</script> 
</htmb> 
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区 各 Eements Console Sources Network Performance » J 
@9O mT vew ST 7 Groupbyfame Preserve log 7 Disable cal 
Fiter Hide data URLs 


@ xn vs css Img Medis Font Doc Ws Manifest omer 
20ms 40ms 6oms goms 100 ms 





Name x Headers Preview Response Timing 
new_ file.html?_ hbt=152222... | Y {showapi_res_error: "", showapi_res_code: 
showapi_res_body: {allpages: 38, ret_cod 
showapi_res_code: 

showapi_res_errori "" 


2 requests | 4.1 KB transferred | F... 


Console What's New x 





图 8-9 在 开发 者 工具 中 查看 网 络 请 求 





onreadystatechange 用 来 设置 一 个 回调 函数 , 当 请 求 的 状态 发 生 改 变 时 , 此 函数 会 被 调用 。 
XMLHttpRequest 请 求 对象 的 readyState 属 性 可 以 获取 当前 请 求 的 状态 ， 其 状态 码 与 意义 如 表 
8-1 所 示 。 


表 8-1 状态 码 及 其 意义 


意义 
请 求 未 初始 化 
服务 器 连接 已 建立 
请 求 已 接收 
请 求 处 理 中 
请 求 已 完成 
XMLHttpRequest 请 求 对 象 的 status 属 性 用 来 表示 服务 端 做 出 的 响应 状态 ， 通 常情 况 下 ， 
200 表 示 响 应 成 功 。XMLHttpRequest 请 求 对 象 的 responseText 为 服务 端 返回 的 文本 数据 。 上 面 
的 代码 将 请 求 的 数据 获取 到 ， 并 填充 进 文档 的 body 标 签 中 。 


8-2-3 ”代码 实现 


下 面 我 们 来 看 看 AJAX 的 应 用 和 使 用 JavaScript 动 态 操作 网 页 。 首 先 新 建 一 个 工程 文件 
夹 ， 将 其 命名 为 Laugh， 在 其 中 新 建 3 个 文件 夹 ， 分 别 命 名 为 css、js 和 img， 这 些 文件 夹 用 来 
放置 样式 表 、JavaScript 脚 本 和 图 片 素材 ,并 在 根 目录 Laugh 文 件 夹 中 新 建 一 个 index.html 文 件 。 








234 


第 8 章 JavaScript 项 目 实战 


首先 编写 index.html 文 件 ， 在 其 中 进行 应 用 架构 的 搭建 ， 参 考 代码 如 下 : 
<!DOCTYPE html> 


<html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 


<link rel="stylesheet" type="text/css" href="css/index.css"/> 
<script type="text/javascript" src="js/index.js" ></script> 
</head> 
<body class="body"> 
<hl class="title"> 笑 一 笑 ， 十 年 少 </hl> 
<div class="button"> 趣 图 吧 </div> 
<div class="container" id="container"> 
</div> 
<div class="container" id="container2" hidden="hidden"> 
</div> 
</body> 
</html> 


上 面 的 第 1 个 div 标 签 作为 切换 按钮 , 用 来 切换 文本 笑话 和 图 片 笑话 模式 。 通过 为 div 标 签 
添加 hidden 属 性 来 控制 模块 的 显示 和 隐藏 。 
在 js 文件 夹 下 新 建 一 个 index.js 文 件 ， 在 其 中 编写 如 下 代码 : 


(function(window){ 
/默认 从 第 1 页 开始 请 求 数据 
// 文 本 笑话 页 数 
window.Tpage = 1; 
// 图 片 笑 话 页 数 
window.Ipage= 1; 
/为 窗口 添加 加 载 完 成 的 回调 
window.onload = functionO){ 
let button = document.getElementsByClassName(button')[0]; 
/为 按钮 添加 点 击 事件 
button.addEventListener('click',function(){ 
这 button.innerText 一 ' 趣 图 吧 '){ 
button.innerText = " 笑 一 笑 "; 
lete= document.getElementById("container ); 
let e2 = document.getElementById("container2"); 
€.setAttribute('hidden','hidden"); 


235 


现代 JavaScript 编程 : 经 典范 例 与 实践 技巧 


e2.removeAttribute(hidden ); 

}else{ 
button.innerText = " 趣 图 吧 "; 
lete= document.getElementById("container"); 
let e2 = document.getElementById("container2"); 
e2.setAttribute(hidden',hidden'); 
e.IemoveAttribute(hidden'); 


D; 
/请 求 第 一 页 数据 
requestData(0); 
requestData(1); 
1 
/监听 窗口 的 滚动 ， 当 滚动 到 底部 时 ， 进 行 加 载 更 多 的 操作 
window.onscroll = function(event){ 
var wScrollY = window.scrollY; // 当前 滚动 条 位 置 
Var wInnerH = window.innerHeight; // 设备 窗口 的 高 度 
var bScrollH = document.body.scrollHeight; // 滚动 条 总 高 度 
if (wScrollY + wInnerH >= bScrollH) { 
// 进 行 加 载 更 多 
let button = document.getElementsByClassName(button')[0]; 
if(button.innerText==" 筑 一笑"){ 


requestData( 1); 
jelsef 
TequestData(0); 
} 
b 
1 
D(window); 
/请 求 数据 函数 


function requestData(type){ 

var request = new XMLHttpRequest(); 

if(type—D! 
page = window.Ipage++; 
request.open("GET"," http://route.showapi.com/341-22showapi_appid= 

58027&showapi_sign=74b9fcd59b844b98b6427da974f4e2e9&page="+page,true); 

}else{ 

page = window.Tpage++; 
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request.open("GET","http://route.showapi.com/341-1?showapi_appid= 
58027&showapi_ sign=74b9fcd59b844b98b6427da974f4e2e9&page="+page,true); 
} 
request.onreadystatechange = function(){ 
让 (requestreadyState 一 4 && requeststatus 一 200) 


{ 
var data = JSON.parse(request.responseText); 
for (let i= 0;i<data.showapi_res_body.contentlist.length;i++) { 
ifttype—0){ 
let ele = createElement(data.showapi_res_body.contentlist[i]); 
let con = document.getElementByld('container’"); 
con.appendChild(ele); 
Yelse{ 
let ele = createElementImg(data.showapi_res_body.contentlist[i]); 
let con = document.getElementById(container2); 
con.appendChild(ele); 
} 
} 
} 
} 
request.send(); 
// 创 建文 本 div 区 域 


function createElement(data) { 
var div = document.createElement('div"); 
var tit = document createElement('div); 
var content = document.createElement('div"); 
div.appendChild(tit); 
div.appendChild(content); 
tit.innerHTML = data.title; 
content.innerHTML = data.text; 
tit.setAttribute('class','cTitle'"); 
div.setAttribute("class","cContanier"); 
content.setAttribute("class","cContent"); 
return div; 

} 

// 创 建 图 片 div 区 域 

function createElementImg(data){ 
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var div = document.createElement(div ); 
vartit= document createElement('div); 
var content = document.createElement(img"): 
div.appendChild(tit); 
div.appendChild(content); 
tit.innerHTML = data.title; 
content.innerHTML = data.text; 
tit.setAttribute('class','cTitle'); 
div.setAttribute("class","cContanier"); 
content.setAttribute("width","360px"); 
content.setAttribute('src',data.img); 
return div; 


} 
上 面 的 代码 就 是 我 们 整个 应 用 的 核心 逻辑 部 分 ,还 需要 添加 一 个 样式 表 文 件 来 进行 界面 
的 布局 控制 ， 在 css 文 件 夹 下 新 建 一 个 命名 为 index.css 的 文件 ， 在 其 中 添加 如 下 代码 : 


.body!{ 
background: #eeeeee; 


.title{ 
background: #eeeeee; 
text-align: center; 
position: fixed; 
width: 100%; 
margin: 0 auto; 
top: Opx; 
padding-top: 20px; 

.Container{ 
background: white; 
width: 400px; 
margin: 0 auto; 
margin-top: 8Opx; 

} 

.button{ 


position: fixed; 
background: blue; 
color: white; 
border-radius: Spx; 
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width: 110px; 
text-align: center; 
height: 40px; 
line-height: 40px; 
top: 20px; 

} 

.CTitle{ 
text-align: center; 
padding: 20px; 
font-size: 25px; 

} 

.CContanier{ 
padding-bottom: 20px; 
border-bottom: dashed 1px; 
padding-left 20px; 
padding-right: 20px; 

1 

.CContent{ 
text-indent: 30px; 

} 


在 浏览 器 中 运行 项 目 ， 效 果 如 图 8-10 与 图 8-11 所 示 。 


笑 一 笑 ， 十 年 少 Ez 


我 问 大 师 :“ 像 我 这 样 .… 


问 大 师 :“ 像 我 这 样 的 人 如 何 做 环保 ? " 大 新 
说 :“ 施 主 长 成 这 般 模样 ， 不 出 门 就 是 环保 ，” 





知道 为 什么 文科 生 和 理 … 
知道 为 什么 文科 生 和 理科 生 不 好 恋爱 吗 ? 文科 


生 :“ 叶 的 商 去 ， 是 风 的 追求 ， 还 是 树 的 不 的 徊 ? ” 
理科 生 ;“ 是 脱落 酸 ，” 


小 姑娘 打 LOL 就 别 看 直播 了 


真 的 ， 小 姑娘 打 LOL 可 以 ， 别 看 直播， 不振 别 
的 小 女孩 都 是 * 吉 荫 考 "， 你 说 “ 贼 几 八 荫 ”; 别 的 小 
女孩 说 "你 不 要 藻 我 了 瞪 "， 你 说 "我 是 你 整 你 一 直 
暮 我 ?"; 别 的 小 女孩 说 "这 个 好 好 看 唾 "， 你 说 "我 
操 这 个 是 最 强 的 "。 在 起 驳 线 上 就 输 了 。 


是 时 候 给 女儿 一 些 爱 的 教育 
学 








图 8-10 文本 笑话 界面 


搞笑 图 片 第 1487 期 ( 共 5 图 ) 





搞笑 图 片 第 1489 期 ( 共 5 
图 ) 





图 8-11 


笑 一 笑 ， 十 年 少 
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图 片 笑话 界面 
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